HTML5 Fullscreen API

Live DemoDownload

You have always been able to view a whole webpage in full screen mode. To do so, you can press F11 key in Windows, while in OS X you can hit Shift + Command + F. However, there are times when we, as a web developer, want to add a trigger on the webpage to perform the function rather than use those keys.

HTML5 has introduced a set of new APIs including Fullscreen API. This API allows us to put our website or just a particular element on the webpage in full screen.

This API would be useful for videos, images, online game, and HTML/CSS-based slide presentations etc.

So let’s start working.

HTML

<div class="demo-wrapper">
	<div id="fullscreen" class="html5-fullscreen-api">
		<img src="spiderman.jpg">
		<span class="fs-button"></span>
	</div>
</div>

 CSS

We have added some CSS to place the image at the center of window and decrease its width.

.demo-wrapper {
	width: 400px;
	margin: 0 auto;
}
.html5-fullscreen-api {
	position: relative;
}
.html5-fullscreen-api img {
	max-width: 100%;
}
.html5-fullscreen-api .fs-button {
	z-index: 100;
	display: inline-block;
	width: 32px;
	height: 32px;
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
}

And now lets add a CSS to diplay button to expand the image to full screen and then exit the full screen. I have use ‘v’ and ‘u’ you can use whatever you like.

.html5-fullscreen-api .fs-button:after {
	display: inline-block;
	width: 100%;
	height: 100%;
	font-size: 32px;
	font-family: 'ModernPictogramsNormal';
	color: rgba(255,255,255,.5);
	cursor: pointer;
	content: "v";
}
.html5-fullscreen-api .fs-button:hover:after {
	color: rgb(255,255,255);
}
#fullscreen:-webkit-full-screen .fs-button:after {
 content: "u";
}

 JavaScript

We will use jQuery to make the code a little bit leaner.

We will use .on jQuery on method for full screen.

$(document).ready(function(){
	$('.fs-button').on('click', function(){
		var elem = document.getElementById('fullscreen');
		if (document.webkitFullscreenElement) {
			document.webkitCancelFullScreen();
		} else {
			elem.webkitRequestFullScreen();
		};
	});
});

 CSS for Full Screen

#fullscreen:-webkit-full-screen img {
	display: block;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
}

Live DemoDownload