responsive layout

by Derk-Jan Hartman

HTML

<script src="https://cdn.rawgit.com/wikimedia/mediawiki-extensions-TimedMediaHandler/master/resources/videojs/video.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/wikimedia/mediawiki-extensions-TimedMediaHandler/master/resources/videojs/video-js.css">
<script src="https://cdn.rawgit.com/wikimedia/mediawiki/master/resources/lib/jquery/jquery.ba-throttle-debounce.js"></script>
<input type="range" id="player_size" min="10" max="600" value="200" step="10" style="width:600px;"/>
<!-- Begin VideoJS -->
<video id="example_video_1" class="video-js" width="200" height="100" poster="https://video-js.zencoder.com/oceans-clip.png" controls preload>
        <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
        <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"'>
        <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
<!-- End VideoJS -->

CSS

.video-js .vjs-big-play-button {
  display: none;
}
/* Make the controlbar visible by default */
.video-js .vjs-control-bar {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
}
.video-js .vjs-progress-control {
  min-width: 4em;
}

JavaScript

$( function () {
  videojs( '#example_video_1', {
    controlBar: {
			liveDisplay: false,
			volumeMenuButton: {
				vertical: true,
				inline: false
			}
		}
  }, function () {
    var player = this;
        $player = $( this.el() );

    function setLayout( layout ) {
      if ( layout === 'vjs-layout-tiny' ) {
        $player.addClass( 'vjs-layout-tiny' ).removeClass( 'vjs-layout-small vjs-layout-x-small' );
      } else if ( layout === 'vjs-layout-x-small' ) {
        $player.addClass( 'vjs-layout-x-small' ).removeClass( 'vjs-layout-tiny vjs-layout-small' );
      } else if ( layout === 'vjs-layout-small' ) {
        $player.addClass( 'vjs-layout-small' ).removeClass( 'vjs-layout-tiny vjs-layout-x-small' );
      } else {
        $player.removeClass( 'vjs-layout-tiny vjs-layout-x-small vjs-layout-small' );
      }
    }

    function makeBigger() {
      if ( $player.hasClass( 'vjs-layout-tiny' ) ) {
        setLayout( 'vjs-layout-x-small' );
      } else if ( $player.hasClass( 'vjs-layout-x-small' ) ) {
        setLayout( 'vjs-layout-small' );
      } else if ( $player.hasClass( 'vjs-layout-small' ) ) {
        setLayout( 'default' );
      } else {
        return;
      }
      $player.trigger( 'resize' );
    }
    function makeSmaller() {
      if ( $player.hasClass( 'vjs-layout-tiny' ) ) {
        return;
      } else if ( $player.hasClass( 'vjs-layout-x-small' ) ) {
        setLayout( 'vjs-layout-tiny' );
      } else if ( $player.hasClass( 'vjs-layout-small' ) ) {
        setLayout( 'vjs-layout-x-small' );
      } else {
        setLayout( 'vjs-layout-small' );
      }
      $player.trigger( 'resize' );
    }
    
    function checkSize() {
      var playerWidth = $player.width();
      var controlWidth = $player.find( '.vjs-play-control' ).outerWidth();
      var controlBarWidth = 0;
      var progressWidth = $player.find( '.vjs-progress-control' ).outerWidth();


      $player.find( '.vjs-control-bar > *:visible' ).each( function () {
       ...