Etiqueta Vídeo HTML5 Responsive y cómo poner un vídeo de fondo a pantalla completa - ACTUALIZADO

Desde que se publicó esta noticia ha habido cambios importantes con respecto al parámetro autoplay que os pasamos a detallar.

NOTA: Actualmente Google Chrome no reproduce vídeos en autoplay a no se que se active la opción muted en la etiqueta <video>. Se recomienda ponerlo antes del atributo autoplay.

NOTA: Actualmente los navegadores móviles no permiten la opción autoplay para evitar el uso innecesario de datos.

Para insertar vídeo en HTML5 vamos a usar la etiqueta <video>, que es válida para todos los navegadores execepto IE8 y Opera mini.

Para que se vea correctamente vamos a necesitar de los siguientes formatos de vídeo.

.mp4 > para navegadores Internet Explorer, Chrome y Safari.
.WebM > para Firefox.
.ogv > para Opera.

Para convertir nuestro archivo de vídeo a estos formatos vamos a utilizar:

HandBrake para convertir vídeos a .mp4.

A continuación explicaremos como tenemos que codificar el vídeo para su correcto funcionamiento en la web.

Lo primero que hacemos es configurar la resolución del vídeo en la pestaña Picture.

Pestaña Picture:

Height > 720 (no se necesita más resolución para un vídeo destinado a la web).

Pestaña Vídeo:

Container > MP4
Video Codec > H.264 (X264)
Avg Bitrate > 2900 (ponemos Variable Framerate ya que es mejor para la web).
2 Pass Encoding (para una mejor codificación).
H.264 Profile > High

Pestaña Audio:

Codec > AAC
Bitrate > 64
Mixdown > Mono


Miro Video Converter para convertir vídeos a .WebM y .OGV. Este programa no permite mucha configuración, a si que simplemente cargamos el vídeo que hemos pasado a MP4  y en el botón Format, lo pasamos a .WebM y OGV.

Una vez tenemos los vídeos pasamos a usar la etiqueta HTML5 <video> de la siguiente manera:

<video controls muted autoplay preload="auto" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360">

<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
    Tu navegador no soporta HTML5 Video
</video>

Los párametros que soporta <video> son:
- Controls > Añade una barra con controles (es diferente por cada navegador).
- Muted > Para quitar el audio al vídeo. Si queremos que se reproduzca  un vídeo en autoplay  en Chrome, tenemos que activar esta opción.
- Autoplay > Para que el vídeo empiece sin necesidad de darle al play.
- Loop > Para que se vuelva a reproducir cuando se acabe el vídeo.
- Preload > Puede tomar los valores auto (carga el vídeo cuando carga la web), none (viene bién cuando tenemos una videogalería) y metadata (carga sólamente los metadatas)
- Poster > Para añadir una imagen personalizada al inicio del vídeo.
- Width - Height > Para especificar el ancho y el alto del vídeo.



Para hacerlo compatible con la mayoría de los navegadores usamos la etiqueta <source> con el parámetro de type.

Para hacer el vídeo responsive podemos utilizar Fitvids.js o bien aplicar las soluciones que nos proponen CSS-Tricks en su artículo Fluid Width Video.

Nosotros hemos utilizado esta solución que contiene un vídeo que proviene de Youtube con muy buenos resultados.

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Para poner un vídeo a pantalla completa  de fondo de nuestra web hay que utilizar el siguiente código CSS:

video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

Os hemos dejado un ejemplo en nuestro codepen.

See the Pen Vídeo de fondo a pantalla completa by Pedro Marín (@pedromarin) on CodePen.
https://codepen.io/dudleystorey/pen/PZyMrd

Por último para poner un vídeo de YouTube a pantalla completa podemos utilizar esta solución de Dudley Storey https://codepen.io/dudleystorey/pen/PZyMrd

See the Pen FullScreen YouTube Video Background In Pure CSS by Dudley Storey (@dudleystorey) on CodePen.