Guide: How to Use Fullscreen HTML5 API: Tips
We have always been able to view an entire webpage in full screen. To do this, you can press the F11 key in Windows, while in OS X you can press Shift + Command + F. However, there are times when we as a web developer want to add a trigger on the web page to disable the feature instead of using those keys. In addition to providing several new elements, HTML5 also introduced a series of new APIs, including one we are going to discuss in this post called Full screen APIThis API allows us to view our website or just a specific element on the webpage in full screen (and vice versa) using the native functionality of the browser. Implementation wise, this API especially useful for videos, images, online games and HTML / CSS based slideshows So let’s see how it works.
Browser support
At the time of writing, this API only works for Google Chrome, Safari and Firefox. As with CSS3, the syntax is preceded as it is still in the experimental stage. It’s worth noting that the Fullscreen API may change in the future.
Usage example
One of the best ways to learn something new is to set an example. In this post, we will be running a simple project. The idea is that we have an image and a button that will put the image in full screen or return it to normal view with one click. HTML Let’s start with the HTML markup. We have a C.S.S Then we’ll place the image in the center of the window and add a few decorative styles to make it look nicer. demo wrapper {width: 38%; margin: 0 auto;}. html5-fullscreen-api {position: relative;}. html5-fullscreen-api img {max-width: 100%; border: 10px solid #fff; box-shadow: 0px 0px 50px #ccc;}. html5-fullscreen-api .fs-button {z-index: 100; display: inline-block; width: 32px; height: 32px; position: absolute; top: 10px; right: 10px; cursor: pointer;} I decided to put the icon in it element with: after pseudo-element, so we can easily change the icon later via CSS using the content attribute. .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);}
JavaScript We will be using jQuery to make the code a bit leaner. As we said, we will send the image full screen with one click. We wrap the function under the jQuery .on method. $ (‘. fs-button’) .on (‘ click ‘, function () { We first check if the element is already in full screen mode, if this condition returns we will run the webkitCancelFullScreen to send it to normal view. Otherwise, we’ll convert it to full screen using the webkitRequestFullScreen method, like so. $ (‘. fs-button’) .on (‘ click ‘, function () {var elem = document.getElementById (‘ fullscreen ‘); if (document.webkitFullscreenElement) {document.webkitCancelFullScreen ();} else {elem.webkitRequestFullScreen ();}; }); Click on the full screen icon and our image will be displayed in full screen as shown in the following screenshot.
Full screen CSS
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 full screen mode. Suppose we want to change the background, then we can write the style rules this way. #fullscreen: -webkit-full-screen {background image: url (‘../ img / ios-linen.jpg’); width: 100%;} Now you should see the iOS linen texture in full screen.
That is it. You can go to the demo page to see it in action. Since we don’t specify the feature with the Firefox syntax, this demo will only work in Webkit browsers, Google Chrome and Safari
Further references
Full Screen API Concept – W3C How to use full screen mode – MDN HTML5 Fullscreen API – Sitepoint
How to Use Fullscreen HTML5 API: Tips: benefits
Faq
Final note
I hope you like the guide How to Use Fullscreen HTML5 API: Tips. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends. For our visitors: If you have any queries regards the How to Use Fullscreen HTML5 API: Tips, then please ask us through the comment section below or directly contact us. Education: This guide or tutorial is just for educational purposes. Misinformation: If you want to correct any misinformation about the guide “How to Use Fullscreen HTML5 API: Tips”, then kindly contact us. Want to add an alternate method: If anyone wants to add more methods to the guide How to Use Fullscreen HTML5 API: Tips, then kindly contact us. Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off). Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.
