Add support for fullscreen mode

dianafisher · dianafisher · commit 88bf01950a43 · 2016-12-22T15:52:56.000-08:00
diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html
@@ -19,6 +19,7 @@
        <input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
        <button data-skip="-10" class="player__button">« 10s</button>
        <button data-skip="25" class="player__button">25s »</button>
+       <button class="player__button fullscreen">[fs]</button>
      </div>
    </div>
 
diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
@@ -7,6 +7,7 @@ const progressBar = document.querySelector('.progress__filled');
 const toggle = document.querySelector('.toggle');
 const skipButtons = document.querySelectorAll('[data-skip]'); // attribute selector.
 const ranges = document.querySelectorAll('.player__slider');
+const fullscreen = document.querySelector('.fullscreen');
 
 /* 2.  Build our functions. */
 
@@ -57,6 +58,17 @@ function scrub(e) {
     console.log(e);
 }
 
+function handleFullscreen(e) {
+    console.log(e);
+    if (video.requestFullscreen) {
+        video.requestFullscreen();
+    } else if (video.webkitRequestFullscreen) {
+        video.webkitRequestFullscreen();
+    }
+        
+
+}
+
 /* 3.  Hook up event listeners */
 
 video.addEventListener('click', togglePlay);
@@ -86,3 +98,5 @@ progress.addEventListener('mousemove', (e) => mousedown && scrub(e));
 progress.addEventListener('mousedown', () => mousedown = true);
 progress.addEventListener('mouseup', () => mousedown = false);
 
+fullscreen.addEventListener('click', handleFullscreen);
+
