{"id":17471,"date":"2019-06-25T23:18:50","date_gmt":"2019-06-25T15:18:50","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=17471"},"modified":"2025-04-24T17:07:14","modified_gmt":"2025-04-24T09:07:14","slug":"html5-fullscreen-api","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/html5-fullscreen-api\/","title":{"rendered":"How to Use HTML5 Fullscreen API"},"content":{"rendered":"

We have always been able to view a whole webpage in fullscreen mode. To do so, you can hit F11<\/kbd> key in Windows, while in OS X you can hit Shift<\/kbd> + Command<\/kbd> + F<\/kbd>. However, there are times when we, as web developers, want to add a trigger on the webpage to perform the function rather than relying on those keys.<\/p>\n

In addition to providing several new elements, HTML5<\/a> also introduced a set of new APIs, including one we are going to discuss in this post: the Fullscreen API<\/strong>. This API allows us to put our website, or just a particular element<\/strong> on the webpage, into fullscreen mode (and vice versa) using the browser\u2019s native functionality.<\/p>\n

As far as implementation is concerned, this API would be useful particularly for videos, images, online games, and HTML\/CSS-based slide presentations<\/strong>.<\/p>\n

So, let\u2019s see how it works.<\/p>\n

Recommended Reading:<\/strong> More HTML5 \/ CSS3 Tutorials<\/a><\/p>\n

Browser Support<\/h2>\n

At the time of writing, this API only works for Google Chrome, Safari, and Firefox. Similar to CSS3, the syntax is prefixed as it is still in an experimental stage.<\/p>\n\n\n\n\n\n\n\n
Webkit<\/strong><\/th>\nFirefox<\/strong><\/th>\nDescription<\/strong><\/th>\n<\/tr>\n<\/thead>\n
webkitRequestFullScreen<\/code><\/td>\nmozRequestFullScreen<\/code><\/td>\nThe method to send the webpage or specified element fullscreen.<\/td>\n<\/tr>\n
webkitCancelFullscreen<\/code><\/td>\nmozCancelFullscreen<\/code><\/td>\nThe method to exit fullscreen mode.<\/td>\n<\/tr>\n
mozFullScreenElement<\/code><\/td>\nwebkitFullScreenElement<\/code><\/td>\nThe method to check whether the element is in fullscreen mode.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

It is worth noting that the Fullscreen API is subject to change in the future.<\/p>\n

Usage Example<\/h2>\n

One of the best ways to learn something new is by example. In this post, we will run a simple project. The idea is to have an image and a button that will put the image fullscreen or change it back to normal view with a click.<\/p>\n

HTML<\/strong><\/p>\n

Let\u2019s start with the HTML markup. We have a <div><\/code> element to wrap the image and a <span><\/code> element for the button.<\/p>\n

\n<div id=\"fullscreen\" class=\"html5-fullscreen-api\">\n  <img src=\"img\/arokanddedes.jpg\">\n  <span class=\"fs-button\"><\/span>\n<\/div><\/pre>\n
CSS<\/strong><\/p>\n
Then, we place the image at the center of the window and add a few decorative styles to make it look nicer.<\/p>\n
\n.demo-wrapper {\n  width: 38%;\n  margin: 0 auto;\n}\n.html5-fullscreen-api {\n  position: relative;\n}\n.html5-fullscreen-api img {\n  max-width: 100%;\n  border: 10px solid #fff;\n  box-shadow: 0px 0px 50px #ccc;\n}\n.html5-fullscreen-api .fs-button {\n  z-index: 100;\n  display: inline-block;\n  width: 32px;\n  height: 32px;\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  cursor: pointer;\n}<\/pre>\n
\"Example<\/figure>\n
I decided to display the icon in the <span><\/code> element using the :after<\/code> pseudo-element<\/a>, so that later we can change the icon easily through CSS using the content<\/code> attribute.<\/p>\n
\n.html5-fullscreen-api .fs-button:after {\n  display: inline-block;\n  width: 100%;\n  height: 100%;\n  font-size: 32px;\n  font-family: 'ModernPictogramsNormal';\n  color: rgba(255,255,255,.5);\n  cursor: pointer;\n  content: \"v\";\n}\n.html5-fullscreen-api .fs-button:hover:after {\n  color: rgb(255,255,255);\n}<\/pre>\n
\"Fullscreen<\/figure>\n
JavaScript<\/strong><\/p>\n
We will use jQuery to make the code a little leaner.<\/p>\n
As mentioned, we will send the image fullscreen upon a click. We wrap the function under the jQuery .on<\/code> method.<\/p>\n
\n$('.fs-button').on('click', function(){\n\n});<\/pre>\n
First, we check whether the element is already in fullscreen mode. If this condition returns true, we will execute webkitCancelFullScreen<\/code> to return it to the normal view. Otherwise, we will turn it fullscreen using the webkitRequestFullScreen<\/code> method, like so:<\/p>\n
\n$('.fs-button').on('click', function(){\n  var elem = document.getElementById('fullscreen');\n  if(document.webkitFullscreenElement) {\n    document.webkitCancelFullScreen();\n  }\n  else {\n    elem.webkitRequestFullScreen();\n  };\n});<\/pre>\n
Click on the fullscreen icon, and our image will go fullscreen, as shown in the following screenshot.<\/p>\n
\"Image<\/figure>\n
Fullscreen CSS<\/h2>\n
Webkit (as well as Firefox) also provides a set of new pseudo-classes that allow us to add style rules when the element is in fullscreen mode. Say we want to change the background; we can write the style rules this way:<\/p>\n
\n#fullscreen:-webkit-full-screen {\n  background-image: url('..\/img\/ios-linen.jpg');\n  width: 100%;\n}<\/pre>\n
Now, you should see the iOS linen texture in fullscreen mode.<\/p>\n
\"Fullscreen<\/figure>\n
That\u2019s it. You can head over to the demo page to see it in action. Since we do not specify the function with the Firefox syntax, this demo will only work in Webkit Browsers: Google Chrome and Safari.<\/p>\n
\n    View Demo<\/a>\n    Download<\/a>\n<\/div>\n
Further References<\/h2>\n