page-header

Video responsivo full screen

video-fullscreen-compressor

Como poner un video full screen responsivo HTML5

Les dejo aqui el codigo para poner un video full screen responsivo en HTML5 :

<div class=”fullscreen-bg”>

<video loop muted autoplay poster=”img/suvideo.jpg” class=”fullscreen-bg__video”>

<source src=”video/suvideo.webm” type=”video/webm”>

<source src=”video/suvideo.mp4″ type=”video/mp4″>

<source src=”video/suvideo.ogv” type=”video/ogg”>

</video>

</div>

Y la CSS correspondiente :

.fullscreen-bg {
position: fixed; /*atencion esto se puede sacar si no le funciona*/
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}

.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}