How to Use the HTML5 Full-Screen API

Share this article

Update:
This article is now outdated. Please see the updated version, How to Use the HTML5 Full-Screen API (Again). Flash has offered a full-screen mode for many years but, until now, browser vendors have resisted the feature. The main reason: security. If you can force an app to run full-screen, the user loses their browser, taskbar and standard operating system controls. They may not be able to close the window or, worse, nefarious developers could emulate the OS and trick users into handing over passwords, credit card details, etc. At the time of writing, the HTML5 full-screen API has been implemented in Firefox, Chrome and Safari. Mozilla provide good cross-browser details but it’s worth noting that the specifications and implementation details are likely to change. Unlike pressing F11 to make your browser go full-screen, the API sets a single element full-screen. It’s intended for images, videos and games using the canvas element. Once an element goes full-screen, a message appears temporarily to inform the user that they can press ESC at any time to return to windowed mode. The main properties, methods and styles are: element.requestFullScreen() Makes an individual element full-screen, e.g. document.getElementById(“myvideo”).requestFullScreen(). document.cancelFullScreen() Exits full-screen mode and returns to the document view. document.fullScreen Returns true if the browser is in full-screen mode. :full-screen A CSS pseudo-class which applies to an element when it’s in full-screen mode.

Vexing Vendor Prefixes

Don’t bother trying to use these API names. You’ll require vendor prefixes for BOTH
the CSS and JavaScript properties:
StandardChrome/SafariFirefox
.requestFullScreen().webkitRequestFullScreen().mozRequestFullScreen()
.cancelFullScreen().webkitCancelFullScreen().mozCancelFullScreen()
.fullScreen.webkitIsFullScreen.mozfullScreen
:full-screen:-webkit-full-screen:-moz-full-screen
There’s no support in Internet Explorer or Opera yet, but I would suggest you use the ‘ms’ and ‘o’ prefixes for future proofing. I’ve developed a function in the demonstration page which handles the prefix shenanigans for you:

var pfx = ["webkit", "moz", "ms", "o", ""];
function RunPrefixMethod(obj, method) {
	
	var p = 0, m, t;
	while (p < pfx.length && !obj[m]) {
		m = method;
		if (pfx[p] == "") {
			m = m.substr(0,1).toLowerCase() + m.substr(1);
		}
		m = pfx[p] + m;
		t = typeof obj[m];
		if (t != "undefined") {
			pfx = [pfx[p]];
			return (t == "function" ? obj[m]() : obj[m]);
		}
		p++;
	}

}
We can then make any element viewable full screen by attaching a handler function which determines whether it’s in full-screen mode already and acts accordingly:

var e = document.getElementById("fullscreen");

e.onclick = function() {

	if (RunPrefixMethod(document, "FullScreen") || RunPrefixMethod(document, "IsFullScreen")) {
		RunPrefixMethod(document, "CancelFullScreen");
	}
	else {
		RunPrefixMethod(e, "RequestFullScreen");
	}

}

The CSS

Once the browser enters full-screen mode you’ll almost certainly want to modify the styles for the element and it’s children. For example, if your element normally has a width of 500px, you’ll want to change that to 100% so it uses the space available, e.g.

#myelement
{
	width: 500px;
}

#myelement:full-screen
{
	width: 100%;
}

#myelement:full-screen img
{
	width: 100%;
}
However, you cannot use a list of vendor prefixed selectors:

/* THIS DOES NOT WORK */
#myelement:-webkit-full-screen,
#myelement:-moz-full-screen,
#myelement:-ms-full-screen,
#myelement:-o-full-screen,
#myelement:full-screen
{
	width: 100%;
}
For some bizarre reason, you must repeat the styles in their own blocks or they won’t be applied:

/* this works */
#myelement:-webkit-full-screen	{ width: 100% }
#myelement:-moz-full-screen		{ width: 100% }
#myelement:-ms-full-screen		{ width: 100% }
#myelement:-o-full-screen		{ width: 100% }
#myelement:full-screen			{ width: 100% }
Weird. View the demonstration page in Firefox, Chrome or Safari… The technique works well. The only issue I’ve discovered concerns Safari on a two-monitor desktop — it insists on using the first monitor for full-screen mode even if the browser is running on the second screen? While it’s possibly a little early to use full-screen mode, games developers and video producers should keep an eye on progress. If you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like HTML5 & CSS3 For the Real World. Comments on this article are closed. Have a question about HTML5? Why not ask it on our forums?

Frequently Asked Questions (FAQs) about HTML5 Full Screen API

What is the HTML5 Full Screen API and how does it work?

The HTML5 Full Screen API is a feature that allows web developers to display web content in full-screen mode, meaning that the content will cover the entire screen of the device. This is particularly useful for applications such as games, videos, or any other content that benefits from a larger viewing area. The API works by providing methods to request full-screen mode, exit full-screen mode, and check if the full-screen mode is currently active. It also provides events that are triggered when the full-screen mode is entered or exited, allowing developers to react accordingly.

How can I enable full-screen mode using HTML5 Full Screen API?

To enable full-screen mode using the HTML5 Full Screen API, you need to call the requestFullscreen() method on the element you want to display in full-screen mode. This method is usually called in response to a user action, such as clicking a button. Here’s a basic example:

document.getElementById("myElement").requestFullscreen();

How can I exit full-screen mode?

To exit full-screen mode, you can call the exitFullscreen() method on the document. This will return the display to its normal state. Here’s how you can do it:

document.exitFullscreen();

How can I check if full-screen mode is currently active?

You can check if full-screen mode is currently active by checking the fullscreenElement property of the document. If this property is null, full-screen mode is not active. If it’s not null, it will return the element that is currently displayed in full-screen mode.

if (document.fullscreenElement) {
console.log("Full-screen mode is active");
} else {
console.log("Full-screen mode is not active");
}

Are there any browser compatibility issues with the HTML5 Full Screen API?

Yes, there are some browser compatibility issues with the HTML5 Full Screen API. Not all browsers support the API, and those that do may implement it slightly differently. For example, the method to request full-screen mode is requestFullscreen() in standard browsers, but webkitRequestFullscreen() in WebKit-based browsers like Chrome and Safari, and mozRequestFullScreen() in Firefox.

How can I handle browser compatibility issues with the HTML5 Full Screen API?

To handle browser compatibility issues, you can use feature detection to check if the full-screen methods are available, and if not, fall back to the browser-specific methods. Here’s an example:

var elem = document.getElementById("myElement");

if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}

Can I use CSS with the HTML5 Full Screen API?

Yes, you can use CSS with the HTML5 Full Screen API. When an element is displayed in full-screen mode, it receives a :fullscreen pseudo-class. You can use this pseudo-class in your CSS to style the element differently when it’s in full-screen mode.

Can I use the HTML5 Full Screen API on mobile devices?

Yes, you can use the HTML5 Full Screen API on mobile devices. However, keep in mind that the user experience may be different, as mobile browsers often have their own ways of handling full-screen mode.

Are there any security concerns with the HTML5 Full Screen API?

Yes, there are some security concerns with the HTML5 Full Screen API. For example, a malicious website could potentially trick a user into thinking they’re interacting with the operating system instead of the website. To mitigate this risk, browsers typically only allow full-screen mode to be activated in response to a user action, and display a notification when full-screen mode is entered.

Can I use the HTML5 Full Screen API with iframes?

Yes, you can use the HTML5 Full Screen API with iframes. However, the iframe must have the allowfullscreen attribute set. Without this attribute, the requestFullscreen() method will fail.

Craig BucklerCraig Buckler
View Author

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

apiCSSHTML5 Dev CenterJavaScript
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week