video-html5

Inserir vídeo com fons a la teua pàgina web amb Html5 fullscreen

Hui en dia esta molt de moda el poder inserir vídeos com a fons en lloc d’una imatge, doncs bé ací vos deixe com fer-ho, és molt senzill només ens hem de preocupar de tenir els tags de HTML5 i simplement amb aquestes línies de codi ho tenim llest.

Ací el codi HTML5 que ens ajudarà a inserir el vídeo.

 

<video autoplay="autoplay" loop="loop" id="video_background" preload="auto" volume="50"/>
  <source src="/url/tuvideo.mp4" type="video/mp4" />
</video/>
I ací el codi css que posicionarà el vídeo en el fons de pantalla i farà que sigui fullscreen.

#video_background {
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
}
#video_pattern {
background:#fff;
position: fixed;
opacity: 0.8;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1;
}