Notice: Undefined index: HTTP_ACCEPT_LANGUAGE in /var/www/vhost/wpiece.com/home/html/comun/configuracion.php on line 24
Cloud Web Component example: Background Video

Web Component Background Video


One way to have an impactful landing page for your website is to include an autoplay video as a background. Background Video is a custom element equivalent to the video tag but will make our video included in the wallpaper and adapted to it. It will automatically play in loop.

Internally it uses the video tag adapting it using css. To also be automatically reproducible on mobile devices is configured with the attributes autoplay, muted y loop.

This custom element url is http://www.wpiece.com/p/15_34

As always, you must include the polyfill for web components before the component it is imported.

The most basic use only requires the video to be played using the source tag:

<!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>

Use examples

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

More sources

Like the video tag you can specify more than one source video.

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

Without overlay

By default Background Video set and overlay to the video to make the top content readable, but assigning the overlay attribute to the false value would render the video without it.

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

Include poster

In case the browser doesn't allow the reproduction of the video, it is possible to indicate in the attribute poster an image to be used as an alternative background.