BigScreen

A simple library for using the JavaScript Fullscreen API.

Why should I use it?

BigScreen makes it easy to use full screen on your site or in your app. It smoothes out browser inconsistencies and bugs, especially if the element you're working with is inside of an <iframe>. It will also intelligently fall back to the older video full screen API if the element contains a <video> and the older API is available.

Download

BigScreen is ~1 kb minified and gzipped. Download it now.

Supported Browsers

Chrome 15+
Firefox 10+
Safari 5.1+

These browsers are also supported for video only:

Safari 5.0

Demo

How do I use it?

Put the entire page in full screen

document.getElementById('button').addEventListener('click', function() {
	if (BigScreen.enabled) {
		BigScreen.toggle();
	}
	else {
		// fallback
	}
}, false);

Put any element in full screen

var element = document.getElementById('target');

document.getElementById('button').addEventListener('click', function() {
	if (BigScreen.enabled) {
		BigScreen.request(element);
		// You could also use .toggle(element)
	}
	else {
		// fallback for browsers that don't support full screen
	}
}, false);

Detecting full screen changes

BigScreen.onenter = function() {
	// called when entering full screen
}

BigScreen.onexit = function() {
	// called when exiting full screen
}

Documentation

BigScreen.request(element)

Request that an element go into full screen. If the element is null or undefined, the documentElement will be used instead.

You can only call this from a user-initiated event, otherwise the browser will deny the request. That means click, key, or touch events.

In addition, if your page is inside an <iframe> it will need to have the allowfullscreen (and webkitallowfullscreen and mozallowfullscreen) attribute set on the <iframe>.

Finally, BigScreen will try to fall back to full screen for <video> if there is a child <video> in the element you pass and the browser supports it (see BigScreen.videoEnabled)). If BigScreen falls back, it will automatically load and play the video.

BigScreen.exit()

Will exit full screen. Note that if there are multiple elements in full screen, only the last one will exit full screen.

BigScreen.toggle(element)

Will request full screen if there is no element in full screen, otherwise it will exit full screen.

BigScreen.onenter()

Override to get notified when an element enters full screen. BigScreen.element will be set to the element that is entering full screen.

BigScreen.onexit()

Override to get notified when fully exiting full screen (there are no more elements in full screen).

BigScreen.onerror()

Override to get notified if there is an error sending an element into full screen. The value of this will be the element that generated the error.

BigScreen.element

Set to the element that is currently displaying full screen, or null if no element is in full screen.

BigScreen.enabled

A boolean that will tell you if it is possible to go into full screen. If your page is in an <iframe> it will need to have the allowfullscreen attribute set or this will be false.

BigScreen.videoEnabled(video)

Safari 5.0 and iOS 4.2+ support putting <video> into full screen. BigScreen.enabled will report false in those browsers, but you can use this to check for <video> full screen support by passing the <video> itself, or an ancestor.

This function will report false if there is no child <video>, or if it is not possible to put a <video> in full screen. It will report 'maybe' if the video's metadata has not been loaded, and true if it will be able to enter full screen.

Known Issues

There is currently a bug in WebKit that causes the webkitfullscreenchange event to fire incorrectly when inside an iframe. BigScreen is able to work around the issue though. (Chrome Bug, Safari Bug: rdar://problem/11927884)

Safari 6.0 does not work properly when putting multiple elements into full screen. Open Radar bug report.

timmickey / BigScreen