Skip to content

Instantly share code, notes, and snippets.

@muglug

muglug/index.html

Created April 28, 2015 18:29
Show Gist options
  • Save muglug/ad398e957ad973208668 to your computer and use it in GitHub Desktop.
Save muglug/ad398e957ad973208668 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype html>
<html>
<head>
<title>Full Screen Example</title>
<style type="text/css">
/* make the video stretch to fill the screen in WebKit */
:-webkit-full-screen #myvideo {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<p>Source: https://developer.mozilla.org/samples/domref/fullscreen.html</p>
<p>This is an example of the full-screen API in action. Press the Return or Enter key to toggle full-screen mode.</p>
<p><strong>To use full-screen mode, you need Firefox 9 or later or Chrome 15 or later.</strong></p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<video controls src="http://videos.cdn.mozilla.net/brand/Mozilla_2011_Story.webm" width="640" height="360" id="myvideo"></video>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
<p>Scroll this is some padding</p>
</body>
<script>
var videoElement = document.getElementById("myvideo");
function toggleFullScreen() {
if (!document.mozFullScreen && !document.webkitFullScreen) {
if (videoElement.mozRequestFullScreen) {
videoElement.mozRequestFullScreen();
} else {
videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else {
document.webkitCancelFullScreen();
}
}
}
document.addEventListener("keydown", function(e) {
if (e.keyCode == 13) {
toggleFullScreen();
}
}, false);
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment