Using Full Screen Mode

using-full-screen-mode.html

<!-- https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode -->
<video controls id="myvideo">
	<source src="somevideo.webm"></source>
	<source src="somevideo.mp4"></source>
</video>
<script>
	// We can put that video into fullscreen mode with script like this:
	var elem = document.getElementById("myvideo");
	if (elem.requestFullscreen) {
		elem.requestFullscreen();
	} else if (elem.msRequestFullscreen) {
		elem.msRequestFullscreen();
	} else if (elem.mozRequestFullScreen) {
		elem.mozRequestFullScreen();
	} else if (elem.webkitRequestFullscreen) {
		elem.webkitRequestFullscreen();
	}
</script>

<style>
	/* Presentation differences

	It's worth noting a key difference here between the Gecko and WebKit implementations at this time: Gecko automatically adds CSS rules to the element to stretch it to fill the screen: "width: 100%; height: 100%". WebKit doesn't do this; instead, it centers the fullscreen element at the same size in a screen that's otherwise black. To get the same fullscreen behavior in WebKit, you need to add your own "width: 100%; height: 100%;" CSS rules to the element yourself: */

	:-webkit-full-screen #myvideo {
		width: 100%;
		height: 100%;
	}
</style>