Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Responsive Options for Video.js</title>
  
  <link href="https://vjs.zencdn.net/5-unsafe/video-js.css" rel="stylesheet">
  <script src="https://vjs.zencdn.net/5-unsafe/video.js"></script>
  
</head>
<body>
  <h1>Responsive Options for Video.js</h1>
​
Uncomment different blocks of html to see the different options. Browsers start to struggle and you'll see weird issues when you have multiple video elements playing the same video file.
  
<p>Every video is inside a 400px by 300px div.</p>
​
  <h3>1. No dimensions, preload: none</h3>
  <pre>
  &lt;video preload="none"&gt;
  </pre>
  <p>Should start with the default size (300x150), then resize to the content dimensions after playing.</p>
  <div style="width: 400px; height: 300px; position: relative; border: 1px solid #099;">
    <video id="v1" class="video-js vjs-default-skin" controls
        preload="none"
        poster="http://video-js.zencoder.com/oceans-clip.png"
        data-setup='{}'>
      <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
      <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
    </video>
  </div>
  
  <p>(uncomment other html blocks to see other options)</p>
​
<!-- <h3>No dimensions, preload: metadata</h3>
  <pre>
  &lt;video preload="auto"&gt;
  </pre>
  <p>should resize to fit content dimensions, no letterboxing, breaking out of the box</p>
  <div style="width: 400px; height: 300px; position: relative; border: 1px solid #099;">
    <video id="" class="video-js vjs-default-skin" controls
        preload="metadata"
        poster="http://video-js.zencoder.com/oceans-clip.png"
        data-setup='{}'>
      <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
      <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
    </video>
  </div> -->
​
<!--   <h3>Fixed width: 200, height: 200</h3>
  <pre>
  &lt;video width="200" height="200"&gt;
  </pre>
  <p>should be fixed</p>
  <div style="width: 400px; height: 300px; position: relative; border: 1px solid #099;">
    <video id="" class="video-js vjs-default-skin" controls preload="metadata"
        poster="http://video-js.zencoder.com/oceans-clip.png"
        width="200"
        height="200"
        data-setup='{}'>
      <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
      <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
    </video>
  </div> -->
​
<!--   <h3>Fixed width 300, Auto height, preload: none</h3>
  <pre>
  &lt;video width="300" preload="none"&gt;
  </pre>
  <p>should start at default aspect ratio, letterboxing</p>
  <div style="width: 400px; height: 300px; position: relative; border: 1px solid #099;">
    <video id="" class="video-js vjs-default-skin" controls preload="none"
        poster="http://video-js.zencoder.com/oceans-clip.png"
        width="300"
        data-setup='{}'>
      <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
      <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
    </video>
  </div>-->
​
  <!-- <h3>Fixed width 300, Auto height, preload: metadata</h3>
  <pre>
  &lt;video width="300" preload="metadata"&gt;
  </pre>
  <p>should resize height based on content aspect ratio, no letterboxing</p>
  <div style="width: 400px; height: 300px; position: relative; border: 1px solid #099;">
    <video id="" class="video-js vjs-default-skin" controls preload="metadata"
        poster="http://video-js.zencoder.com/oceans-clip.png"
        width="300"
        data-setup='{}'>
      <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
      <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
    </video>
  </div> -->
​
<!--   <h3>Fixed height 200, Auto width, preload none</h3>
  <pre>
  &lt;video height="300" preload="none"&gt;
  </pre>
  <p>should have a height of 200 and change width to default aspect ratio, letter boxing</p>
  <div style="width: 400px; height: 300px; position: relative; border: 1px solid #099;">
    <video id="" class="video-js vjs-default-skin" controls
        preload="none"
        poster="http://video-js.zencoder.com/oceans-clip.png"
        height="200"
        data-setup='{}'>
      <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
      <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
    </video>
  </div> -->
​
<!--   <h3>Fixed height 200, Auto width, preload: metadata</h3>
  <pre>
  &lt;video height="200" preload="metadata"&gt;
  </pre>
  <p>should have a height of 200 and resize width to content aspect ratio, no letterboxing</p>
  <div style="width: 400px; height: 300px; position: relative; border: 1px solid #099;">
    <video id="" class="video-js vjs-default-skin" controls
        preload="metadata"
        poster="http://video-js.zencoder.com/oceans-clip.png"
        height="200"
        data-setup='{}'>
      <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
      <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
    </video>
  </div> -->
​
<!--   <h3>Added vjs-fill css class</h3>
  <pre>
  &lt;video class="vjs-fill"&gt;
  </pre>
  <p>should fill the area, 400x300</p>
  <div style="width: 400px; height: 300px; position: relative; border: 1px solid #099;">
    <video id="" class="video-js vjs-default-skin vjs-fill" controls preload="metadata"
        poster="http://video-js.zencoder.com/oceans-clip.png"
        data-setup=''>
      <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
      <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
    </video>
  </div> -->
​
<!--   <h3>Added vjs-16-9 css class</h3>
  <pre>
  &lt;video class="vjs-16-9"&gt;
  </pre>
  <p>shoud have letterboxing</p>
  <div style="width: 400px; height: 300px; position: relative; border: 1px solid #099;">
    <video id="" class="video-js vjs-default-skin vjs-16-9" controls preload="metadata"
        poster="http://video-js.zencoder.com/oceans-clip.png"
        data-setup='{}'>
      <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
      <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
    </video>
  </div> -->
​
<!--   <h3>Set Aspect Ratio 4:1</h3>
  <pre>
  videojs(id, { aspectRatio: '4:1' });
  </pre>
  <p>should be 100% width and height should be 10% of width (skinny)</p>
  <div style="width: 400px; height: 300px; position: relative; border: 1px solid #099;">
    <video id="" class="video-js vjs-default-skin" controls
        preload="auto"
        poster="http://video-js.zencoder.com/oceans-clip.png"
        data-setup='{ "aspectRatio": "4:1" }'>
      <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
      <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
    </video>
  </div> -->
​
​
<!--   <h3>Fluid:true (Aspect Ratio Auto), preload: metadata</h3>
  <pre>
  videojs(id, { fluid: true, preload: 'metadata' });
  </pre>
  <p>should be 100% width, and resize to match aspect ratio (no letterboxing) - demo often breaks in chrome because of Chrome's same-source bug</p>
  <div style="width: 400px; height: 300px; position: relative; border: 1px solid #099;">
    <video id="last" class="video-js vjs-default-skin" controls
        preload="metadata"
        poster="http://video-js.zencoder.com/oceans-clip.png"
        data-setup='{ "fluid": true }'>
      <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
      <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
    </video>
  </div> -->
​
  
</body>
</html>
 
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
heffpro
0viewers