JSFiddle - React, Tailwind, and code Playground

HTML

<div id="video-bg">
    <video autoplay muted loop controls id="smartphonevid">
        <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
            <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
                <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
    </video>
</div>
<div id="video-bg">
    <video autoplay muted loop controls id="tabletvid">
        <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
            <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
                <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
    </video>
</div>
<div id="video-bg">
    <video autoplay muted loop controls id="desktopvid">
        <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
            <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
                <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
    </video>
</div>

CSS

#video-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}
#video-bg > video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* 1. No object-fit support: */
 @media (min-aspect-ratio: 16/9) {
    #video-bg > video {
        height: 300%;
        top: -100%;
    }
}
@media (max-aspect-ratio: 16/9) {
    #video-bg > video {
        width: 300%;
        left: -100%;
    }
}
/* 2. If supporting object-fit, overriding (1): */
 @supports (object-fit: cover) {
    #video-bg > video {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

JavaScript

$(document).ready(function () {
    
    function pauseAndHide($element) {
        $element.get(0).pause();
        $element.hide();
    }
    
    function showTheGoodOne() {
        if ($(window).width() < 767) {
            $('#smartphonevid').show();
            $('#smartphonevid').get(0).play();
        } else if ($(window).width() >= 767 && $(this).width() < 980)   {
            $('#tabletvid').show();
            $('#tabletvid').get(0).play();
        } else if ($(window).width() >= 980)  {
            $('#desktopvid').show();
            $('#desktopvid').get(0).play();
        } 
    }
    
    function pauseAndHideAll() {   
        $('video').each(function() {
            pauseAndHide($(this));         
        });     
    }
    
    pauseAndHideAll();
    showTheGoodOne();
    
    $(window).resize(function () {
        pauseAndHideAll();
        showTheGoodOne();
    });
});