JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//vjs.zencdn.net/4.12/video-js.css">
<script src="//vjs.zencdn.net/4.12/video.js"></script>
<video id="embvid" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
controls preload="auto"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<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' />
<track kind="captions" src="/vtt/captions.vtt" srclang="en" label="English">
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
CSS
.vjs-control-bar {
overflow: hidden;
}
JavaScript
videojs("embvid", { "height": "auto", "width": "auto" }).ready(function () {
// Get the video player object.
var videoPlayer = this;
// Get the player's parent element.
var parent = document.getElementById(videoPlayer.id()).parentElement;
// Video's aspect ratio (HD).
var aspectRatio = 9 / 16;
function resizeVideoJS() {
// Find the parent's current width.
var width = parent.offsetWidth;
videoPlayer.width(width).height(width * aspectRatio);
}
// Initialize the size by calling once.
resizeVideoJS();
// Call again on every resize event.
window.onresize = resizeVideoJS;});