Web Component Background Video


Una forma de tener una página de entrada impactante para tu sitio web es incluir un vídeo con reproducción automática como fondo. Background Video es un custom element equivalente a la etiqueta video pero que hará que nuestro vídeo sea incluido en el fondo de pantalla y adaptado a la misma. Se reproducirá automáticamente en bucle.

Internamente utiliza la propia etiqueta video adaptándola mediante css. Para que también sea reproducible automáticamente en dispositivos móviles se configura con los atributos autoplay, muted y loop.

La url de este custom element es http://www.wpiece.com/p/15_34

Como siempre, debes incluir antes de la importación del componente el polyfill para web components.

El uso más básico solo requiere indicar el vídeo a reproducir usando la etiqueta source:

<!DOCTYPE html>
<html lang="en">
<head>
	<script src="https://www.wpiece.com/js/webcomponents.min.js"></script>
	<link  rel="import" href="http://www.wpiece.com/p/15_34" />
</head>
<body>
	<background-video>
		<source src="video.mp4" type="mp4">
	</background-video>
</body>
</html>

Ejemplos de uso

<background-video>
	<source src="video.webm" type="webm">
	<source src="video.mp4" type="mp4">
</background-video>

Varias fuentes

Al igual que la etiqueta video se puede indicar más de un vídeo origen.

<background-video overlay="false">
	<source src="video.mp4" type="mp4">
</background-video>

Sin cubierta

Por defecto Background Video superpone una cubierta al vídeo para hacer más legible el contenido superior, pero asignando al atributo overlay el valor false se presentaría el vídeo si la cubierta.

<background-video poster="video-poster.jpg">
	<source src="video.mp4" type="mp4">
</background-video>

Incluir poster

En el caso de que el navegador no permita la reproducción del vídeo se puede indicar en el atributo poster una imagen a utilizar como fondo alternativo.