3/25/2014 - 7:04 PM

Using Full Screen Mode

Using Full Screen Mode

<!-- -->
<video controls id="myvideo">
	<source src="somevideo.webm"></source>
	<source src="somevideo.mp4"></source>
	// We can put that video into fullscreen mode with script like this:
	var elem = document.getElementById("myvideo");
	if (elem.requestFullscreen) {
	} else if (elem.msRequestFullscreen) {
	} else if (elem.mozRequestFullScreen) {
	} else if (elem.webkitRequestFullscreen) {

	/* 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%;