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.



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

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.


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

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

 CSS for Full Screen

Live DemoDownload


Leave a Reply