moving backdrop example from Glitch

rachelandrew · rachelandrew · commit d39a548d74be · 2020-12-04T17:10:52.000Z
diff --git a/backdrop/index.html b/backdrop/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>MDN Web Docs Example: Toggling full-screen mode</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    
+    <!-- import the webpage's stylesheet -->
+    <link rel="stylesheet" href="style.css">
+    
+    <!-- import the webpage's javascript file -->
+    <script src="script.js" defer></script>
+  </head>  
+  <body>
+    <h1>Example: Toggling full-screen presentation of a video</h1>
+    
+    <p>In this example, we see a video element showing a movie ("Big Buck Bunny").
+    you can toggle full screen mode on and off by pressing the Return or Enter key.</p>
+    
+    <!-- Simple video example -->
+    <!-- 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org -->
+    <!-- Poster from peach.blender.org -->
+    <video controls
+        src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
+        poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
+        width="620">
+
+    Sorry, your browser doesn't support embedded videos.  Time to upgrade!
+
+    </video>
+  </body>
+</html>
diff --git a/backdrop/script.js b/backdrop/script.js
@@ -0,0 +1,37 @@
+// Any copyright is dedicated to the Public Domain.
+// http://creativecommons.org/publicdomain/zero/1.0/
+
+window.addEventListener("load", doStartup, false);
+
+function doStartup(event) {
+  document.fullscreenElement = document.fullscreenElement || document.mozFullscreenElement
+            || document.msFullscreenElement || document.webkitFullscreenDocument;
+  document.exitFullscreen = document.exitFullscreen || document.mozExitFullscreen
+            || document.msExitFullscreen || document.webkitExitFullscreen;
+  
+  document.addEventListener("keypress", handleKeypress, false);
+}
+
+function handleKeypress(event) {
+  if (event.keyCode === 13) {
+    toggleFullscreen();
+  }
+}
+
+
+function toggleFullscreen() {
+  let elem = document.querySelector("video");
+
+  elem.requestFullscreen = elem.requestFullscreen || elem.mozRequestFullscreen
+          || elem.msRequestFullscreen || elem.webkitRequestFullscreen;
+
+  if (!document.fullscreenElement) {
+    elem.requestFullscreen().then({}).catch(err => {
+      alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
+    });
+  } else {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    }
+  }
+}
diff --git a/backdrop/style.css b/backdrop/style.css
@@ -0,0 +1,15 @@
+/* CSS files add styling rules to your content */
+
+body {
+    font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
+    margin: 2em;
+  }
+  
+  h1 {
+    font-style: italic;
+    color: #373fff;
+  }
+  
+  video::backdrop {
+    background-color: #448;
+  }
