JSFiddle - React, Tailwind, and code Playground

by dledle2

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>
<script src="//cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.8.3/videojs-contrib-hls.min.js"></script>
<!-- <script src='//cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.8.3/videojs-contrib-hls.min.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="http://video-js.zencoder.com/oceans-clip.png" controls preload>
        <source src="http://tvemsnbc-lh.akamaihd.net/i/nbcmsnbc_1@122532/index_796_av-p.m3u8?sd=10&rebase=on" type='application/x-mpegURL'>

</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 responsiveLayout() {
  var player = this,
  	el_ = player.el();
  $player = $( el_ );

  function outerWidth(el) {
    var width = el.offsetWidth;
    var style = getComputedStyle(el);

    width += parseInt(style.marginLeft) + parseInt(style.marginRight);
    return width;
  }
  
  function width(el){
	  return parseInt(getComputedStyle(el).width);
  }

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

  function makeBigger() {
    if ( videojs.hasClass( el_, 'vjs-layout-tiny' ) ) {
      setLayout( 'vjs-layout-x-small' );
    } else if ( videojs.hasClass( el_, 'vjs-layout-x-small' ) ) {
      setLayout( 'vjs-layout-small' );
    } else if ( videojs.hasClass( el_, 'vjs-layout-small' ) ) {
      setLayout( 'default' );
    } else {
      return;
    }
    player.trigger( 'resize' );
  }
  function makeSmaller() {
    if ( videojs.hasClass( el_, 'vjs-layout-tiny' ) ) {
      return;
    } else if ( videojs.hasClass( el_, 'vjs-layout-x-small' ) ) {
      setLayout( 'vjs-layout-tiny' );
    } else if ( videojs.hasClass( el_, 'vjs-layout-small' ) ) {
      setLayout( 'vjs-layout-x-small' );
    } else {
      setLayout( 'vjs-layout-small' );
    }
    player.trigger( 'resize' );
 ...