English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
requestFullscreen()Method used to open an element in full-screen mode.
This method requires a specific prefix to work in different browsers (see the browser compatibility below).
Usagedocument.exitFullscreen()Method to cancel full-screen mode.
HTMLElement.requestFullscreen()
/* Get the (<html>) element to display the page in full-screen */
var elem = document.documentElement;
/* Full-screen view */
function openFullscreen() {
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();
}
}Test and See‹/›The numbers in the table indicate the first browser version that fully supports this method. Each browser requires a specific vendor prefix:
| Method | |||||
| requestFullscreen() | 15.0 (Webkit) | 9.0 (moz) | 12.10(Webkit) | 5.1(Webkit) | 11.0 (ms) |
| Return value: | None |
|---|
Display the <video> element in full-screen mode:
/* Get the (<video>) element */
var elem = document.getElementsByTagName("video")[0];
/* Full-screen view */
function openFullscreen() {
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();
}
}Test and See‹/›When the page is in full-screen mode, you can use CSS to set the page style:
div:-moz-full-screen {
background-color: pink;
}
div:-webkit-full-screen {
background-color: pink;
}
div:fullscreen {
background-color: pink;
}Test and See‹/›HTML DOM Reference:document.exitFullscreen() method
HTML DOM Reference:document.fullscreenElement property
HTML DOM Reference:document.fullscreenEnabled property