videojs auto-resize

CSS

/* Add extra classes for a variable width / height*/
#div-video-wrapper {
    position: relative;
    background-color: #000;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(50, 50, 50, 0.95);
    border: 2px #ccc solid;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    width: 640px;
    height: 360px;
}

HTML

<div id="div-video-wrapper">
    <video id="video-content" class="video-js vjs-default-skin vjs-big-play-centered"
           controls poster="assets/images/posters/bigbuckbunny.png" preload="auto">
        <source src="http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm" type="video/webm">
        <source src="assets/videos/Big_Buck_Bunny_Trailer_1080p.ogg" type="video/ogg">
    </video>
</div>

JS

myView.myVideoPlayer = videojs(myConstants.multiMedia.DOM_VIDEO).ready(function () {
  var myPlayer = this;

  // Responsive
  var aspectRatio = 9/16; // AR 16:9
  function resizeVideoJs(){
      // Get the parent element's actual width
      var width = document.getElementById(myPlayer.id()).parentElement.offsetWidth;
      // Set my width to fill parent element, set my calculated height
      myPlayer.width(width).height( width * aspectRatio );
  }
  resizeVideoJs(); // Initialize the function right now
  window.onresize = resizeVideoJs; // Call the function on resize
}