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; }