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 () {
    $(window).resize(function () {
        if ($(this).width() < 767)
            
        else if ($(this).width() >= 767 && $(this).width() < 980)            
            
        else if ($(this).width() >= 980)                        
            
    });
});