How to Implement HTML5 Full Screen API

How to Implement HTML5 Full Screen API

We all are used to viewing a whole web page in full screen mode. To experience it, simply hit the F11 key in Windows OS, if you are using OS X you can press Shift + Command + F.But what if you want to see a particular page element and not the whole page in full screen mode?

HTML5 introduced several new elements as well as various amazing API’s. We’re going to learn about one of them called “FullScreen API”.

HTML5 Full Screen API

Why this Full-Screen API?

Before this API was invented, simply pressing F11 forced your browser into full-screen mode, and the page filled the screen. So we couldn’t choose to make a selected element full screen. This limitation has been removed by this API.

Using this Full-Screen API a single page element can be viewed full-screen. The API is very useful for videos, images, any game or HTML/CSS based slide presentation running inside a container block. When the user enters full-screen mode, a message informs them that they can press ESC at any time to return to the page.

FullScreen Properties & Events

  • It exposes two properties belonging to the document object.
    • fullScreenEnabled
    • fullScreenElement
  • These specify the element that has been pushed to full screen and if full screen mode is currently enabled.

document.fullscreenEnabled
This property returns true if the document is in a state which allows full-screen mode. It is also used to determine browser support:

if (document.fullscreenEnabled) { 
	// further code goes here
 }

Note: In previous implementations it had an upper case ˜S in ˜Screen and that is still being used for Firefox. Below is the cross-browser code.

if (document.mozFullScreenEnabled || document.fullscreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled ) {
	// further code goes here
}

document.fullscreenElement
This property will return the current element which is being displayed full-screen or return null when not full-screen.

if (document.fullscreenElement) { 
	// further code goes here
 }

Note: screen in fullscreenElement is now lower case. Below is the cross-browser code.

if (document.webkitFullscreenElement ||  document.fullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
// Further code goes here
}
  • This API exposes two methods, allowing us to request an element to become full screen and to exit full screen.
    • requestFullscreen()
    • exitFullscreen()

element.requestFullscreen()
This method is responsible for making an individual element full-screen, example:

document.getElementById("element id goes here").requestFullscreen();

Note: screen is now lower case. Below is the cross-browser code.

var ele = document.getElementById("element id goes here");
 
	// going full-screen
	if (ele.requestFullscreen) {
	    ele.requestFullscreen();
	}
	else if (ele.webkitRequestFullscreen) {
	    ele.webkitRequestFullscreen();
	}
	else if (ele.msRequestFullscreen) {
	    ele.msRequestFullscreen();
	}
	else if (ele.mozRequestFullScreen) {
	    ele.mozRequestFullScreen();
	} 

document.exitFullscreen
This method is used to cancel full-screen mode.

document.exitFullscreen;

Note: Earlier name was cancelFullScreen and still used for Firefox. Below is the cross-browser code.

		if (document.exitFullscreen) {
		    document.exitFullscreen();
		} 
		else if (document.webkitExitFullscreen) {
		    document.webkitExitFullscreen();
		}
		else if (document.msExitFullscreen) {
		    document.msExitFullscreen();
		}
		else if (document.mozCancelFullScreen) {
		    document.mozCancelFullScreen();
		} 

Full-Screen CSS

A bit of control on FullScreen CSS is possible.

:fullscreen {
/* properties */
}

Note: Previously it was :full-screen, and that is still used for Webkit and Firefox. Below is the cross-browser code.

	:fullscreen {
	/* properties */
	}
	:-webkit-full-screen {
	/* properties */
	}
	:-ms-fullscreen {
	/* properties */
	}
	:-moz-full-screen {
	/* properties */
	}
	 
	::backdrop {
	  /* properties */
	}
	::-ms-backdrop {
	  /* properties */
	}

Demonstration

This demonstration presents the use of FullScreen API. View Demo

The HTML

<!-- This is out simple HTML Code -->
<div class="mainwrapper">
	<h2>HTML5 FullScreen API Demo</h2>
	<div id="screen" class="fullscreen">  
		<img src="images/logo.jpg">  
		<span class="full-button"></span>  
	</div>
	<p>Click the letter 'F' on top right corner to toggle full-screen view.</p>
</div>

The CSS

<style>
.mainwrapper {
	width: 38%;
	margin: 0 auto;
}

.mainwrapper h2 {
 text-align:center;
}

.mainwrapper p{
 font-size:12px;
 color:black;
 text-align:center;
 font-family:sans-serif;
 padding-top:15px;
}

.fullscreen {
	position: relative;
}

.fullscreen img {
	max-width: 100%;
	border: 8px solid #69A5F1;
	box-shadow: 5px 5px 45px #69A5F1;
}

.fullscreen .full-button {
	display: inline-block;
	z-index: 105;
	height: 32px;
	width: 32px;
	position: absolute;
	top: 10px;
	right: 15px;
	cursor: pointer;
}

.fullscreen .full-button:after {  
    display: inline-block;  
    width: 100%;  
    height: 100%;  
    font-size: 34px;  
    cursor: pointer;  
	color: #fff; 
    content: "F";  
}  
</style>

The JavaScript

<script>
$(document).ready(function(){
	$('.full-button').on('click', function(){
		var docelem = document.getElementById('screen');
		
		if (docelem.requestFullscreen) {
			docelem.requestFullscreen();
		}else if (docelem.webkitRequestFullscreen) {
			docelem.webkitRequestFullscreen();
		} else if(docelem.mozRequestFullScreen) {
			docelem.mozRequestFullScreen();
		} else if(docelem.msRequestFullscreen) {
			docelem.msRequestFullscreen();
		}
		
	});
});
</script>

Browser Support

If you want to check the browser support for for this API, then I would suggest looking at (source: http://caniuse.com/#feat=fullscreen). In general the FullScreen API is supported by all the major browsers. Take a look at this summary to get an idea of which browsers support the API.

  • Internet Explorer 11+
  • Firefox 10+
  • Chrome 15+
  • Safari 5.1+
  • Opera 12.10+

Things to Keep in Mind

  • The Full Screen mode is not for every website. It should be reserved for very particular applications.
  • FullScreen display should be limited to some instances. It will be proven a good choice in those cases where the user will be engaged without being distracted for several minutes, such cases are:
    • Video Content
    • Games
    • Amazing Slide Presentations
  • If you are offering this facility then make sure the content you’re delivering has a high resolution (in the case of images) otherwise blurred images can cause degradation in user experience and thus page views.

Conclusion

I would say that we have here a very good API. This way, it can be easily integrated with your current application and its proper use may positively affect your user experience. Ultimately, now we can control which elements of a web page will be prompted to FullScreen mode.

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.