A simple library for using the JavaScript Full Screen API.
Switch branches/tags
Nothing to show
Pull request Compare This branch is 56 commits behind bdougherty:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



A simple library for using the JavaScript Full Screen API.

Why should I use it?

Before BigScreen

if (element.requestFullscreen) {
else if (element.webkitRequestFullscreen) {
else if (element.webkitRequestFullScreen) {
else if (element.mozRequestFullScreen) {

After BigScreen


BigScreen also smoothes out a couple browser bugs for you (the real before code is a little more complicated).


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

How do I use it?

Put the entire page in full screen

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

Put any element in full screen

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

document.getElementById('button').addEventListener('click', function() {
	if (BigScreen.enabled) {
		// 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




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.


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


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


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


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


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


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.


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.



BigScreen is licensed under the Apache 2.0 license. Copyright 2012 Brad Dougherty.