Fullscreen API

La API Fullscreen provee una manera fácil de presentar contenido web usando la pantalla completa del usuario. La API permite indicar al navegador que un elemento y sus hijos, si los tiene, ocupar la pantalla completa, ocultando toda la interfaz del usuario y otras aplicaciones de la pantalla mientras se esté en pantalla completa.

Nota: De momento, no todos los navegadores usan la versión sin prefijo de la API. Consulta la tabla que resume las diferencias de prefijos y nombres.

Activando modo de pantalla completa

Para cualquier elemento que quieras presentar en pantalla completa (como por ejemplo, un elemento ), puedes presentarlo en pantalla completa, simplemente invocando a su método requestFullscreen().

Consideremos este elemento :

html

Podemos poner este video en pantalla completa con un script como éste:

js
var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
}

Diferencias de presentación

Cabe aclarar una diferencia clave entre las implementaciones de Gecko y WebKit: Gecko automáticamente añade reglas CSS al elemento para ajustarlo a las dimensiones de la pantalla: "width: 100%; height: 100%". WebKit no hace esto; en su lugar, centra el elemento con su mismo tamaño original en un fondo negro. Para obtener el mismo comportamiento en WebKit, necesitas añadir manualmente las reglas CSS "width: 100%; height: 100%;" al elemento:

css
#myvideo:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

Por otro lado, si quieres emular el comportamiento de WebKit en Gecko, necesitarías colocar el elemento a presentar dentro de otro elemento, con las reglas CSS necesarias para ajustarlo a la apariencia requerida, y será dicho elemento contenedor el que se establecerá para aparecer en pantalla completa.

Notificación

Cuando el modo de pantalla completa sea invocado exitosamente, el documento que contiene al elemento recibe un evento fullscreenchange. Cuando se sale del modo de pantalla completa, el documento recibe de nuevo un evento fullscreenchange. Nótese que el evento fullscreenchange no provee información alguna sobre si el documento está entrando o saliendo a modo de pantalla completa, pero puedes saber si está en dicho modo si la propiedad fullscreenElement del documento no es nula.

Cuando la solicitud de pantalla completa falla

No es garantía que se pueda cambiar a modo de pantalla completa. Por ejemplo, los elementos