Chrome not respecting video source inline media queries

Question

Using the below, Chrome is not respecting the media queries to display the correct video source based on the device width. Chrome is just playing the first source it finds as yo

Answer 1

I used a solution with object-fit: cover;

.video-wrapper {
    position: relative;
    max-width: 100%;
    height: auto;
    overflow: hidden;
    margin-bottom: 0;
    padding-top: 100%;
}

@media (min-width: 768px) {
        .video-wrapper {
                padding-top: 50%;
        }
    }

.video-item {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

Codepen here