JSFiddle - React, Tailwind, and code Playground

by Dawid van der Hoven

HTML

<script src="//vjs.zencdn.net/4.5/video.js"></script>
<link rel="stylesheet" href="//vjs.zencdn.net/4.5/video-js.css">
<div class="feature-video">
        <video id="video" class="video-js vjs-default-skin" controls preload="none"
               poster="http://video-js.zencoder.com/oceans-clip.png"
               data-setup="{}">
            <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>
</div>

JavaScript

// Once the video is ready
videojs("#video").ready(function(){

    var myPlayer = this;    // Store the video object
    var aspectRatio = 4/3; // Make up an aspect ratio

    function resizeVideoJS(){
        // Get the parent element's actual width
        var width = document.getElementById(myPlayer.R).parentElement.offsetWidth;
        // Set width to fill parent element, Set height
        myPlayer.width(width).height( width * aspectRatio );
    }

    resizeVideoJS(); // Initialize the function
    jQuery(window).on('resize', function () {
        resizeVideoJS(); // Call the function on resize
    })
});