Vídeo a Pantalla Completa

Gracias al API Fullscreen de HTML5 podemos poner un vídeo a pantalla completa dentro de nuestra página web. Así aprovecharemos toda la pantalla para que se pueda ver el vídeo de la mejor manera posible.

Crear el elemento vídeo

Lo primero que tendremos que hacer es poner un vídeo dentro de nuestra página HTML5. Para ello nos apoyamos en el elemento video, al cual le pasamos el fichero que contiene el vídeo mediante el atributo src.

<video id="mivideo" src="[video.mp](http://video.mp/)4" controls></video>

Una cosa importante es que debemos de dar un identificador mediante el atributo id al vídeo. Ya que será el identificador que utilicemos para acceder a él y poder poner el vídeo a pantalla completa.

El método requestFullscreen

Lo siguiente que tenemos que saber el cómo utilizar el API Fullscreen, este nos ofrece un método que se llama .requestFullScreen(), el cual permite que casi cualquier elemento de la página se visualice a pantalla completa.

Tenemos que saber que hay varias implementaciones o hacks de este método, por lo cual necesitaremos utilizar los siguientes métodos para mantener compatibilidad entre navegadores.

element.requestFullscreen ||
element.webkitRequestFullscreen ||
element.mozRequestFullScreen ||
element.msRequestFullscreen

Crear función para compatibilidad

Así creamos una función que controle todas ellas.

function getFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

Crear el botón para pantalla completa

Ahora, lo que tenemos que hacer es pasarle el elemento vídeo, accediendo a su id a esta función. Para ello vamos a crear un botón en HTML que nos gestione la acción de poner el vídeo a pantalla completa.

<button id="btnFullscreen">Ver a pantalla completa</button>

Asignar el evento al botón

Mediante la gestión de los eventos del botón, de su evento onclick, vamos a realizar la asociación del vídeo con la función getFullscreen().

document.getElementById('btnFullscreen').onclick = function() {
  var video = document.getElementById('mivideo');
  getFullscreen(video);
};

Vemos que hemos utilizado el método .getElementById() para poder acceder al elemento video mediante su id y pasarlo a la función getFullscreen(). Cada vez que pulsemos sobre el botón veremos nuestro vídeo a pantalla completa.