From d39a548d74bed07f057dd9aa11e46c1a705953cd Mon Sep 17 00:00:00 2001 From: Rachel Andrew Date: Fri, 4 Dec 2020 17:10:52 +0000 Subject: [PATCH] moving backdrop example from Glitch --- backdrop/index.html | 32 ++++++++++++++++++++++++++++++++ backdrop/script.js | 37 +++++++++++++++++++++++++++++++++++++ backdrop/style.css | 15 +++++++++++++++ 3 files changed, 84 insertions(+) create mode 100644 backdrop/index.html create mode 100644 backdrop/script.js create mode 100644 backdrop/style.css diff --git a/backdrop/index.html b/backdrop/index.html new file mode 100644 index 00000000..2dbe14a8 --- /dev/null +++ b/backdrop/index.html @@ -0,0 +1,32 @@ + + + + MDN Web Docs Example: Toggling full-screen mode + + + + + + + + + + +

Example: Toggling full-screen presentation of a video

+ +

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.

+ + + + + + + \ No newline at end of file diff --git a/backdrop/script.js b/backdrop/script.js new file mode 100644 index 00000000..41eee340 --- /dev/null +++ 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(); + } + } +} \ No newline at end of file diff --git a/backdrop/style.css b/backdrop/style.css new file mode 100644 index 00000000..f5435967 --- /dev/null +++ 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; + } \ No newline at end of file