Autor:

Vídeo en html5 e inserción youtube como fondo en la web

0
1278

Alguna vez nos hemos encontrado una web que nos llama la atención por tener de fondo en vez de una imagen, un vídeo en reproducción, pues bien, aquí hacemos un ejemplo simple de como crearlo para una reproducción adaptada para monitores.

CSS

.video {
  position: fixed; 
  right: 0; 
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  width: auto; 
  height: auto; 
  z-index: -100;
}
 
.contenido{
  color:white;
  margin:0 auto;
  width: 100%;
  background: rgba(0,189,255,0.8);
  color: white;
  padding: 30px 5px 30px 5px;
 
}

HTML

Ojo, para funcionar con HTML5 tienes que tener el vídeo en diferentes formatos, ya que cada navegador web puede usar uno distinto.
Aquí esta el ejemplo de código para insertarlo en el HTML:

<video class="video" autoplay preload muted>
  <source src="video.mp4" type='video/mp4; codecs="avc1,mp4a"' />
  <source src="video.ogv" type='video/ogg; codecs="theora,vorbis"' />
  <source src="video.webm" type='video/webm; codecs="vp8,vorbis"' />
</video>

y esta sería la inserción del código de Youtube en el HTML, aquí el ejemplo:

<div class="contenido"> 
<h1>Contenido de la web</h1>
</div>
 
<iframe class="video" src="http://www.youtube.com/embed/A3PDXmYoF5U?rel=0&controls=0&showinfo=0&autoplay=1&html5=1&allowfullscreen=true&wmode=transparent&loop=1 " frameborder="0" allowfullscreen></iframe>

También puedes personalizar los parámetros a tu gusto para el control del reproductor de Youtube, para más información de los parámetros de la API de youtube mira aquí:

parámetros de la API de youtube

Mira este ejemplo funcionando

Temas del árticulo

no se encuentran contenidos para este tema.