JSFiddle - React, Tailwind, and code Playground

by dustinkerstein

HTML

<button id="testVideo">Test Video</button>
<div id="videoWrapper">
    <video id="test" controls src="http://media2.ms.kitd.com/mm/flvmedia/3858/t/d/s/tds4r28w_qq1u765c_h264_2328K.mp4" poster="http://thumb.multicastmedia.com/thumbs/aid/w/h/t1351705158/1571585.jpg"></video>
</div>

CSS

#videoWrapper{
    position:relative;
    width: 100vw;
    height: 50vw;
}
#videoWrapper video{
    width: 100%;
    height: 100%;
}

JavaScript

function scaleToFill(videoTag) {
    var $video = $(videoTag),
        videoRatio = videoTag.videoWidth / videoTag.videoHeight,
        tagRatio = $video.width() / $video.height();
    if (videoRatio < tagRatio) {
            $video.css('-webkit-transform','scaleX(' + tagRatio / videoRatio  + ')')
            $video.css('-moz-transform','scaleX(' + tagRatio / videoRatio  + ')')
            $video.css('-ms-transform','scaleX(' + tagRatio / videoRatio  + ')')
            $video.css('transform','scaleX(' + tagRatio / videoRatio  + ')')
    } else if (tagRatio < videoRatio) {
            $video.css('-webkit-transform','scaleY(' + videoRatio / tagRatio  + ')')
            $video.css('-moz-transform','scaleY(' + videoRatio / tagRatio  + ')')
            $video.css('-ms-transform','scaleY(' + videoRatio / tagRatio  + ')')
            $video.css('transform','scaleY(' + videoRatio / tagRatio  + ')')
    }
}

$(function () {
    $("#testVideo").click(function(evt) {
        scaleToFill(document.getElementsByTagName("video")[0]);
    });
});