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

<video class="desktop-video" autoplay playsinline preload="auto" muted loop width="100%">
    <source src="${pdict.desktop_video}" type="video/mp4">
    <source src="${pdict.desktop_video}" type="video/mov">
    Sorry, your browser doesn't support embedded videos.
</video>
<video class="mobile-video" autoplay playsinline preload="auto" muted loop width="100%">
    <source src="${pdict.mobile_video}" type="video/mp4">
    <source src="${pdict.mobile_video}" type="video/mov">
    Sorry, your browser doesn't support embedded videos.
</video>

Can be done in CSS like

.desktop-video {
    display: grid;

    @include media-breakpoint-down(lg) {
        display: none;
    }
}

.mobile-video {
    display: none;

    @include media-breakpoint-down(lg) {
        display: grid;
    }
}

Answer 2

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

Answer 3

Unfortunally, Chrome is not supporting media queries for video html 5 tag. A work around for this is to use plain Javascript or Jquery. It is no pretty, but works even in chrome.

var video = $('#myvideo');

var WindowWidth = $(window).width();

if (WindowWidth < 1200) {
    //It is a small screen
    video.append("<source src='/img/homepage/640/splash.m4v' type='video/mp4' >");
} else {
    //It is a big screen or desktop
    video.append("<source src='/img/homepage/1080/uimain-1080.mp4' type='video/mp4' >");
}