Cómo Utilizar la API Fullscreen de HTML5

Siempre hemos podido ver una página web entera en modo de pantalla completa. Para ello, podemos pulsar la tecla F11 en Windows, mientras que en OS X podemos pulsar Shift + Command + F. Sin embargo, hay ocasiones en las que nosotros, como desarrolladores web, queremos añadir un disparador en la página web para realizar la función en lugar de utilizar esas teclas.

Además de proporcionar varios elementos nuevos, HTML5 también introdujo un conjunto de nuevas APIs incluyendo una que vamos a discutir en este post, llamada Fullscreen API. Esta API nos permite poner nuestro sitio web o sólo un elemento concreto de la página web a pantalla completa (y viceversa) utilizando la funcionalidad nativa del navegador.

En cuanto a la implementación, esta API sería útil sobre todo para vídeos, imágenes, juegos en línea y presentaciones de diapositivas basadas en HTML/CSS.

Veamos cómo funciona.

Soporte de Navegadores

En el momento de escribir estas líneas, esta API sólo funciona para Google Chrome, Safari y Firefox. Al igual que CSS3, la sintaxis lleva prefijos, ya que aún se encuentra en fase experimental.

Ejemplo de Uso

Una de las mejores maneras de aprender algo nuevo es con el ejemplo. En esta publicación, ejecutaremos un proyecto simple. La idea es que tendremos una imagen y un botón que colocará la imagen en pantalla completa o la volverá a cambiar a la vista normal con un clic.

HTML

Empecemos con el marcado HTML. Tenemos un elemento <div> para envolver la imagen y un elemento <span> para el botón.

<div id="fullscreen" class="html5-fullscreen-api">
  <img src="img/arokanddedes.jpg">
  <span class="fs-button"></span>
</div>

CSS

A continuación, colocamos la imagen en el centro de la ventana y añadimos algunos estilos decorativos para que quede más bonita.

.demo-wrapper {
  width: 38%;
  margin: 0 auto;
}
.html5-fullscreen-api {
  position: relative;
}
.html5-fullscreen-api img {
  max-width: 100%;
  border: 10px solid #fff;
  box-shadow: 0px 0px 50px #ccc;
}
.html5-fullscreen-api .fs-button {
  z-index: 100;
  display: inline-block;
  width: 32px;
  height: 32px;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

A continuación, decidimos mostrar el icono en el elemento <span> utilizando el pseudoelemento :after, para que posteriormente podamos cambiar el icono fácilmente mediante CSS utilizando el atributo content.

.html5-fullscreen-api .fs-button:after {
  display: inline-block;
  width: 100%;
  height: 100%;
  font-size: 32px;
  font-family: 'ModernPictogramsNormal';
  color: rgba(255,255,255,.5);
  cursor: pointer;
  content: "v";
}
.html5-fullscreen-api .fs-button:hover:after {
  color: rgb(255,255,255);
}

JavaScript

Usaremos jQuery para hacer el código un poco más ligero.

Como hemos mencionado, enviaremos la imagen a pantalla completa al hacer clic. Envolvemos la función bajo el método jQuery .on.

$('.fs-button').on('click', function(){ 
 
}

Primero comprobamos si el elemento ya está en modo pantalla completa, si esta condición se cumple ejecutaremos el método webkitCancelFullScreen para enviarlo a la vista normal. En caso contrario, lo convertiremos a pantalla completa usando el método webkitRequestFullScreen, así.

$('.fs-button').on('click', function(){
    var elem = document.getElementById('fullscreen');
    if(document.webkitFullscreenElement) {
      document.webkitCancelFullScreen();
    }
    else {
      elem.webkitRequestFullScreen();
    };
  });

Hacer clic en el icono de pantalla completa, y nuestra imagen pasará a pantalla completa, como se muestra en la siguiente captura de pantalla.

CSS a Pantalla Completa

Webkit (así como Firefox) también proporciona un conjunto de nuevas pseudo-clases que nos permiten añadir reglas de estilo cuando el elemento está en modo de pantalla completa. Digamos que queremos cambiar el fondo, podemos escribir las reglas de estilo de esta manera.

#fullscreen:-webkit-full-screen {
  background-image: url('../img/ios-linen.jpg'); 
  width: 100%;
}

Ahora, deberías ver la textura de ios-linen.jpg en modo de pantalla completa.

Ya está. Puedes dirigirte a la página de demostración para verla en acción. Dado que no especificamos la función con la sintaxis de Firefox, esta demostración sólo funcionará en navegadores Webkit, Google Chrome y Safari.

Ver Código Fuente

Ver Demostración