Chrome не учитывает встроенные медиа-запросы видеоисточника

Используя приведенное ниже, Chrome не учитывает медиазапросы для отображения правильного источника видео в зависимости от ширины устройства. Chrome просто воспроизводит первый найденный источник, как вы можете видеть здесь: http://homeglobal.ch/. Как я могу это исправить?

    <video id="intro-video" poster="img/poster.png" controls>
        <source src="videos/intro.mp4" type="video/mp4" media="all and (min-device-width:1600px)">
        <source src="videos/intro.webm" type="video/webm" media="all and (min-device-width:1600px)">
        <source src="videos/intro-1600.mp4" type="video/mp4" media="all and (min-device-width:1100px)">
        <source src="videos/intro-1600.webm" type="video/webm" media="all and (min-device-width:1100px)">
        <source src="videos/intro-1100.mp4" type="video/mp4" media="all and (min-device-width:481px)">
        <source src="videos/intro-1100.webm" type="video/webm" media="all and (min-device-width:481px)">
        <source src="videos/intro-480.mp4" type="video/mp4">
        <source src="videos/intro-480.webm" type="video/webm">
    </video>

Ответы

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' >");
}

.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;
}