HTML5 full screen (fullscreen) API detailed description

Entire page
onclick= Launchfullscreen (document.documentelement);
An element
Launchfullscreen (document.getElementById ("videoelement"));

Find a supported method, using an element call that requires full-screen
function Launchfullscreen (Element) {
if (Element.requestfullscreen) {
Element.requestfullscreen ();
} else if (Element.mozrequestfullscreen) {
Element.mozrequestfullscreen ();
} else if (Element.webkitrequestfullscreen) {
Element.webkitrequestfullscreen ();
} else if (Element.msrequestfullscreen) {
Element.msrequestfullscreen ();
}
}

Exit fullscreen
function Exitfullscreen () {
if (Document.exitfullscreen) {
Document.exitfullscreen ();
} else if (Document.mozexitfullscreen) {
Document.mozexitfullscreen ();
} else if (Document.webkitexitfullscreen) {
Document.webkitexitfullscreen ();
}
}


Call to exit Full screen Method!
Exitfullscreen ();

Fullscreen Properties and Events

A bad news, so far, full-screen events and methods are still prefixed, the good news is that the mainstream browser will soon be supported.

1.document.fullscreenelement: Elements element that is currently in full-screen state.
2.document.fullscreenenabled: Marks whether Fullscreen is currently available.

The Fullscreenchange event is triggered when the full-screen mode is entered/exited:

var fullscreenelement =
Document.fullscreenenabled
|| Document.mozfullscreenelement
|| Document.webkitfullscreenelement;
var fullscreenenabled =
Document.fullscreenenabled
|| Document.mozfullscreenenabled
|| document.webkitfullscreenenabled;

Fullscreen CSS

The browser provides some useful fullscreen CSS control rules:

/* HTML */
:-webkit-full-screen {
/* Properties */
}
:-moz-fullscreen {
/* Properties */
}


: fullscreen {
/* Properties */
}


/* Deeper elements */
:-webkit-full-screen Video {
width:100%;
height:100%;
}


/* Styling the backdrop */
:: Backdrop {
/* Properties */
}

HTML5 full screen (fullscreen) API detailed description