JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<video id="video" src="http://www.w3schools.com/html/movie.mp4" type="video/mov" autoplay loop></video>

JavaScript

function resizeHandler() {
        // scale the video
        var documentHeight = $(document).height();
        var documentWidth = $(document).width();
        var ratio = $('#video').width() / $('#video').height();

        if((documentWidth / documentHeight) < ratio) {
            $('#video').css({
                'width': 'auto',
                'height': '100%',
                'left': '0px',
                'right': '0px',
                'top': '0px',
                'bottom': '0px'
            })

            var marginRight = $('#video').width() - $(document).width();
            $('#video').css('left', -marginRight);
        } else {
            $('#video').css({
                'width': '100%',
                'height': 'auto',
                'left': '0px',
                'right': '0px',
                'top': '0px',
                'bottom': '0px'
            })

            var marginTop = $('#video').height() - $(document).height();
            $('#video').css('top', -marginTop);
        }
    }