1 files changed, 160 insertions, 0 deletions
diff --git a/javascript/videojs/sandbox/responsive.html.example b/javascript/videojs/sandbox/responsive.html.example
new file mode 100644
index 0000000..b108c74
--- /dev/null
+++ b/javascript/videojs/sandbox/responsive.html.example
@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>Video.js Sandbox - Responsive</title>
+  <link href="../dist/video-js.css" rel="stylesheet" type="text/css">
+  <script src="../dist/video.js"></script>
+  <style type="text/css">
+    body {
+      margin: 0;
+      padding: 0;
+    }
+
+    .breakpoints, .video-js, table {
+      margin: 1em 0;
+    }
+
+    table {
+      border-collapse: collapse;
+    }
+
+    th, td {
+      border: 1px solid #ccc;
+      padding: 0.5em 1em;
+    }
+
+    tbody tr {
+      color: #999;
+    }
+
+    tbody tr:first-child {
+      color: #000;
+    }
+
+    .breakpoints div {
+      background-color: red;
+      color: white;
+      padding: 0.5em 1em;
+    }
+
+    @media (max-width: 210px) {
+      .breakpoints .tiny {
+        background-color: green;
+      }
+    }
+
+    @media (min-width: 211px) and (max-width: 320px) {
+      .breakpoints .x-small {
+        background-color: green;
+      }
+    }
+
+    @media (min-width: 321px) and (max-width: 425px) {
+      .breakpoints .small {
+        background-color: green;
+      }
+    }
+
+    @media (min-width: 426px) and (max-width: 768px) {
+      .breakpoints .medium {
+        background-color: green;
+      }
+    }
+
+    @media (min-width: 769px) and (max-width: 1440px) {
+      .breakpoints .large {
+        background-color: green;
+      }
+    }
+
+    @media (min-width: 1441px) and (max-width: 2560px) {
+      .breakpoints .x-large {
+        background-color: green;
+      }
+    }
+
+    @media (min-width: 2561px) {
+      .breakpoints .huge {
+        background-color: green;
+      }
+    }
+  </style>
+</head>
+<body>
+  <p>
+    The following boxes indicate which breakpoint should be applied to the
+    player when it fills the width of its containing viewport.
+  </p>
+  <p>
+    Use these to validate that the default breakpoints match up with how
+    CSS media queries work.
+  </p>
+  <p>
+    <b>Because these bars are updated by CSS, they will change before the <code>playerresize</code> event occurs!</b>
+  </p>
+  <div class="breakpoints">
+    <div class="tiny">vjs-layout-tiny (0px-210px)</div>
+    <div class="x-small">vjs-layout-x-small (211px-320px)</div>
+    <div class="small">vjs-layout-small (321px-425px)</div>
+    <div class="medium">vjs-layout-medium (426px-768px)</div>
+    <div class="large">vjs-layout-large (769px-1440px)</div>
+    <div class="x-large">vjs-layout-x-large (1441px-2560px)</div>
+    <div class="huge">vjs-layout-huge (2561px+)</div>
+  </div>
+
+  <video-js
+    class="vjs-fluid"
+    controls
+    preload="auto"
+    poster="https://vjs.zencdn.net/v/oceans.png">
+    <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
+    <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm">
+    <source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
+    <track kind="captions" src="../docs/examples/shared/example-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="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
+  </video-js>
+
+  <p>
+    Each time the player size changes, a row is prepended to this table.
+  </p>
+  <table>
+    <thead>
+      <tr>
+        <th>Class</th>
+        <th>Player Width</th>
+      </tr>
+    </thead>
+    <tbody>
+    </tbody>
+  </table>
+
+  <script>
+    var vid = document.querySelector('video-js');
+    var player = videojs(vid, {responsive: true});
+    var tbody = document.querySelector('table tbody');
+
+    player.on('playerresize', function() {
+      var values = {
+        breakpoint: player.currentBreakpoint(),
+        className: player.el().className.match(/vjs-layout-([a-z\-]+)/)[0],
+        playerWidth: player.currentWidth()
+      };
+
+      videojs.log('playerresize', values);
+
+      var tr = document.createElement('tr');
+
+      tr.innerHTML = '<td>' +
+        values.className +
+        '</td><td>' +
+        values.playerWidth +
+        '</td>';
+
+      tbody.insertBefore(tr, tbody.firstChild);
+    });
+  </script>
+
+</body>
+</html>