JSFiddle - React, Tailwind, and code Playground

by lsubirana

HTML

<div id="wrapper"></div>
<video id="vid" controls preload="none" width="100%" height="100%"
      poster="http://video-js.zencoder.com/oceans-clip.png">
        <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'/>
        <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'/>
        <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg'/>
</video>

CSS

#wrapper
{
    width: 2px;
    height: 2px;
    border: solid 2px red;
    position:absolute;
}

JavaScript

var vidRatio = $("#vid").height()/$("#vid").width();

setInterval(function(){
        $("#vid").height($(window).height() - $("header").height() - 7);
        var width = $(window).width()-20;
        $("#wrapper").css({
            'width': width, 
            'height':width*vidRatio,
            'top':($(window).height()-width*vidRatio)/2
        });
    /*There is a header and a bunch of other stuff in the original code*/
}, 10);