Cómo lograr la pantalla completa

Aprenda a crear una ventana de pantalla completa utilizando JavaScript.

ventana de pantalla completa

Cómo ver elementos en modo pantalla completa utilizando JavaScript.

Haga clic en el botón para abrir el video en modo pantalla completa:

Intente usted mismo

video de pantalla completa

Para abrir un elemento en pantalla completa, usamos element.requestFullscreen() Método:

Ejemplo

<script>
/* Obtener el elemento que se mostrará en modo pantalla completa (en este ejemplo, el video): */
var elem = document.getElementById("myvideo");
/* Al ejecutar la función openFullscreen() abre el video en pantalla completa. */
Atención, debemos incluir prefijos para diferentes navegadores, ya que aún no admiten el método requestFullscreen */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
</script>

Intente usted mismo

documento de pantalla completa

Para abrir toda la página en pantalla completa, utilice document.documentElement en lugar de document.getElementById("element").

En este ejemplo, también utilizamos una función de cierre para salir de pantalla completa:

Ejemplo

<script>
/* Obtener documentElement (<html>) para mostrar la página en pantalla completa */
var elem = document.documentElement;
/* Visualización en pantalla completa */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
/* Salir de la pantalla completa */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}
</script>

Cuando la página está en modo de pantalla completa, también puede usar CSS para definir el estilo de la página:

Ejemplo

/* Safari */
:-webkit-full-screen {
  background-color: yellow;
}
/* IE11 */
:-ms-fullscreen {
  background-color: yellow;
}
/* Sintaxis estándar */
:fullscreen {
  background-color: yellow;
}

Intente usted mismo

Páginas relacionadas

Manual de Referencia de HTML DOM:Método requestFullscreen()

Manual de Referencia de HTML DOM:Método exitFullscreen()

Manual de Referencia de HTML DOM:Método documentElement