Cómo utilizar la API Fullscreen de HTML5

De siempre hemos podido ver una página web completa en modo fullscreen o pantalla completa. Para hacerlo, solo hay que presionar la tecla F11 en Windows, mientras que en OS X la combinación de teclas es Shift + Command + F. Sin embargo, hay ocasiones en que, como desarrollador web, queremos que la web se ejecute en modo pantalla completa sin necesidad de que el usuario presione dichas teclas.

HTML5 trajo consigo nuevas características y nuevos elementos, además de numerosas nuevas APIs, incluida la que nos incumbre hoy, la API Fullscreen. Esta API nos permite poner nuestro sitio web, o simplemente un elemento particular de la página, en modo pantalla completa (y viceversa) utilizando la funcionalidad nativa del navegador.

En cuanto a la implementación, esta API es particularmente útil para videos, imágenes, juegos online y slides basados en HTML / CSS.

Una vez dicho esto, vamos a ver cómo funciona...

Una de las mejores maneras de aprender algo nuevo es mediante un ejemplo. En este artículo, haremos algo simple para que puedas entender cómo funciona la API. La idea es que tendremos una imagen y un botón que pondrá la imagen en modo fullscrenn o pantalla completa o la cambiará a la vista normal con un clic.

HTML

Comencemos con el código HTML. Contamos con un elemento <div> que envolverá a la imagen y un elemento <span> para el botón.

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

CSS

Luego, colocamos la imagen en el centro de la ventana y agregamos algunos estilos decorativos para que se vea mejor.

.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;
}

Decidí mostrar el icono en el elemento <span> usando el pseudo-elemento :after, para que luego podamos cambiar el icono fácilmente a través de CSS usando 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

Utilizaremos jQuery para hacer que el código sea un poco más ágil.

Como he dicho antes, pondremos la imagen a pantalla completa con un solo clic. Para ello ponemos la función bajo el método .on de jQuery.

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

Primero verificamos si el elemento ya está en modo de pantalla completa. Si es que sí, ejecutaremos webkitCancelFullScreen para ponerla a la vista normal. De lo contrario, la pondremos en pantalla completa utilizando el método webkitRequestFullScreen, de esta manera.

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

Haciendo clic en el icono de pantalla completa, nuestra imagen pasará a modo fullscreen.

CSS de pantalla completa

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

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

Ahora, deberías ver una imagen de fondo en modo de pantalla completa.

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP
ARTÍCULO ANTERIOR