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

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; 
}
Tags:
, ,