jQuery Fullscreen Plugin

Tuesday, April 10. 2012

jQuery Fullscreen Plugin

Modern browsers (Like Chrome and Firefox) provide an interesting new feature: A fullscreen mode which can be controlled by JavaScript. It is even possible to switch a single HTML element to fullscreen. This is useful for videos or images for example. Unfortunately browsers currently only provide the necessary methods with the usual browser-specific prefixes:

// Firefox
element.mozRequestFullScreen();
document.mozCancelFullScreen();
document.mozFullScreen;

// Chrome
element.webkitRequestFullScreen();
document.webkitCancelFullScreen(); 
document.webkitIsFullScreen;

To simplify the usage of this new feature I wrote a small jQuery plugin.

Usage

Entering Fullscreen mode

You can either switch the whole page or a single HTML element to fullscreen mode:

$(document).fullScreen(true);
$("#myVideo").fullScreen(true);

This only works when the code was triggered by a user interaction (For example a onclick event on a button). Browsers don't allow entering fullscreen mode without user interaction.

Exiting Fullscreen mode

Fullscreen mode is always exited via the document but this plugin allows it also via any HTML element. The owner document of the selected HTML element is used then:

$(document).fullScreen(false);
$("#myVideo").fullScreen(false);

Querying Fullscreen mode

Simply pass no argument to the fullScreen method to query the current state. The method returns true when fullscreen mode is active, false if not or null when the browser does not support fullscreen mode at all. So you can use this method also to display a fullscreen button only when the browser supports fullscreen mode:

$("#fullscreenButton").toggle($(document).fullScreen() != null))

Toggling Fullscreen mode

The plugin provides another method for simple fullscreen mode toggling:

$(document).toggleFullScreen();

Demo

Posted in JavaScript | Comments (14)
Fester at 2012-06-03 21:48
Hi,
thanks for this nice and easy to use plugin! IE 8 throws an error "Document is not defined" when I include the plugin. In the other browsers, it seems to run just fine.
Thanks again and best regards
Wayne at 2012-06-19 11:45
Does not work in Opera 11.6, unfortunately.
oottoo at 2012-07-18 13:36
not working ok. when you click on a link and change page, fullscreen will go off :(
Minati at 2012-08-01 11:17
Hi,
I faced some issues when i used this in ePUB reader.There is the content but the screen became black color and am unable to read the content.

Thanks in advance...and sorry for my bad english.
Klaus Reimer at 2012-08-01 11:42
This depends on the browser. Some browsers indeed use a black background color in full screen mode. Keep in mind that this fullscreen mode is mainly meant for stuff like videos. It is NOT the same as pressing F11 (Or whatever hotkey enters the window fullscreen mode on your OS). As far as I know there are some special fullscreen CSS selectors you can use to change this background color but I forgot how they worked. Just google for it, I'm sure you'll find something.
feynmanpan at 2012-09-08 16:00
Dear Sir,
Once this fullscreen plugin is used, become locked,unable to be keyined any character.

Any solution?
Thanks!
Pratik at 2012-09-19 13:22
Hi,

Is it possible to use the same within iframe?

I have tried to put in the page which is called within iframe, but it is not working for me.

Please suggest.

Thanks
Pratik Shah
Julius at 2012-10-15 22:00
error in IE9.
Cannot find the property CancelfullScreen..
Micha G. at 2012-10-29 15:16
in summary, it works fine for me.
I tried to call $(document).fullScreen(true); in body onload="" or in $(document).ready(function(){});
where it unfortunately doesnt work :-(
Hermann C. at 2012-11-14 21:47
Once in fullscreen mode, the user will likely press the "ESC" key to get out. Is there a way to set an event handler that gets called back regardless of whether user presses "ESC" or programmatically (i.e. $("#myVideo").fullScreen(false); )
Hermann C. at 2012-11-15 11:02
Following up on the above, there are times that the browser gets out of full-screen mode without ESC. For example, if I'm running Firefox and Firebug, the browser jumps out of full-screen if I click on the Firebug window. Therefore a simple keyboard handler is probably not the most robust answer.
Gopinath at 2013-03-13 07:01
Hello Mate

it's working fine in all browsers except IE9, IE8, can you please give me the solution for IE
labaman at 2013-04-09 11:33
How to automatically start fullscreen? Maybe after 3 seconds.
James at 2013-04-28 07:56
just as labaman, Gopinath, Micha G...

Load fullscreen automatically (onload, document.ready)

regards

Enclosing asterisks marks text as bold (*word*), underscore are made via _word_.