Últimamente habrás encontrado más de un sitio (como nuestra página principal) que usa vídeos como fondos.

Usando la marca <video> de HTML5 y su atributo autoplay, es posible hacer que empiecen de forma automática sin necesidad de acción por parte del usuario. Con el CSS adecuado puede colocarse como fondo y ajustarse al ancho de la pantalla.

Hasta aquí todo bien. Sin embargo, habrás visto que esas páginas suelen sustituir ese vídeo por una imagen fija en sus versiones para móvil. Esto se debe principalmente a que Apple y Google, entendiendo que el pobrecito usuario de móvil podría disponer de un consumo de datos más limitado que el de ordenadores, han desactivado la posibilidad de que los vídeos comiencen automáticamente para evitarles sorpresas y gastos innecesarios. Y en el caso de iOS, además, el vídeo ni siquiera se reproduce dentro de la página.

No es que quiera contradecir los filantrópicos principios que han motivado a ambas compañías a tomar tal decisión, pero ya sabéis que hay gente que no soporta bien los límites impuestos. Buscando una solución, encontré el código de Stanko en GitHub (no, no vende tabaco), que permite reproducir vídeos inline en móviles sobre un elemento <canvas>. Quede claro que todo el mérito es suyo y que yo solo me he limitado a modificar su código para mis propósitos.

Que empiece ya, que el público se va

Ok, vayamos al grano. Como suelen decir, en la vida todo tiene solución. Así que empecemos por el principio y veamos el código estándar para insertar un vídeo con HTML5.

Ya que vamos a usarla como fondo, añadiremos a la marca <video> los atributos autoplay, para que empiece automáticamente, loop para que reproduzca en bucle, y muted para eliminar el sonido. He puesto el vídeo en los tres formatos estándares para aumentar el número de navegadores alcanzados, si bien, hoy en día la práctica totalidad respondería perfectamente solo con un archivo mp4 como puedes ver en caniuse.com. Por ese motivo, una vez mostrado el ejemplo genérico, a partir de aquí usaré solamente el archivo mp4.
Añadimos también el atributo poster para mostrar una imagen estática mientras el vídeo carga y un poquito de CSS para hacer que el vídeo se adapte al elemento que lo contiene.

video{
  width: 100%;
}

Como resultado del código anterior obtenemos el siguiente vídeo.

Si estás visitando esta página con un ordenador, verás que el vídeo se reproduce automáticamente en bucle. Pero si estás usando un móvil la cosa cambia. En otra ocasión nos ocuparemos de Android. Ahora, como dice el título, veamos qué pasa en iOS y cómo resolverlo.

iOS: ni inline, ni autoplay

Pues si, una pena. Si nos estás viendo desde un iPhone o un iPad, en lugar de un vídeo en movimiento verás una imagen estática con una marca encima esperando a que la pulses para ponerse en marcha. Y si pulsas sobre ella la cosa empeora. El vídeo no se reproduce en la página, sino que se abre a toda pantalla. Recuerda que nuestro propósito inicial era usarlo como fondo, así que este comportamiento, por mucha carita de niña buena que ponga el vídeo, no nos vale.
Afortunadamente, tal como indiqué antes, nuestro amigo Stanko ha creado el estupendo script HTML canvas video player que nos permite reproducir un video de forma inline en un iAparato, y con pequeñas modificaciones conseguiremos que funcione para nuestro propósito.
Su funcionamiento es sencillo, aunque requiere alguna marca más que un vídeo HTML5 estándar. Para empezar colocamos el vídeo, un elemento canvas y un par de div anidados que servirán de barra de tiempo, y lo metemos a su vez en otro div para tenerlo localizado.

Después cargamos el archivo JavaScript

E insertamos las instrucciones para que funcione

Si lo único que querías era poder reproducir vídeos inline en iPhones y iPads puedes bajártelo y obtener más información sobre sus opciones y métodos aquí.
Pero si lo que quieres es usarlo para poner un vídeo de fondo, necesitará unas pequeñas modificaciones y seguir leyendo un poquito más.

Un poquito más a fondo

Como indicaba, nuestro propósito es poder usar el vídeo como fondo, así que hay pequeños detalles que conviene modificar para ajustar el script a nuestras necesidades.
Para empezar, una prestación del script original es hacer que se pare o reanude la reproducción cada vez que se hace click sobre el vídeo. Un comportamiento que no nos viene bien para usar el vídeo como fondo. El script original tampoco permite hacer loops, y es posible que queramos que nuestro fondo sea un bucle perpetuo.
Para añadir estas dos prestaciones he añadido dos nuevas opciones: makeLoop y pauseOnClick

En esta nueva versión modificada, makeLoop es un valor booleano que permite indicar si queremos que el vídeo se ejecute en bucle. A pauseOnClick puede asignársele el valor false para evitar pausar el vídeo cuando se detecta un click.
Hay que aclarar que, al igual que en la versión inicial, para que el autoplay funcione es necesario desactivar el audio. Eso no debería preocuparnos, ya que lo queremos como imagen de fondo.
Por último, recordemos que no hay problemas con ordenadores de escritorio, así que mejor ponemos un condicional que haga que éstos sigan usando el vídeo HTML5 y los iCacharros su versión corriendo sobre canvas. Así, nos quedaría lo siguiente

¿El fin?

Bueno, tanto como el fin no. La versión mostrada es mejorable y, por ahora, no plantea qué haremos con Android, algo que dejaremos para otra ocasión. Poniéndolo todo junto, la página nos queda como sigue

	
	
	

	

	



		

			

			
			
			
Look at me
		

	


	

Pulsa aquí para ver en otra ventana el resultado de lo anterior (si tienes uno, puedes mirarlo en tu iPhone), con el CSS correspondiente y el script de Stanko modificado.
También puedes bajártelo todo juntito, con un vídeo de prueba y el script original pulsando aquí