Lo normal es usar una imagen estática como fondo para un sitio web, pero es posible probar con otras alternativas para ofrecer una experiencia nueva y original con la colocación de imágenes en movimiento, como puede ser una animación o un vídeo autoejecutable en el fondo de un sitio web.
La página principal de Bing con frecuencia utiliza fondos de vídeo, como los pingüinos saltando de un agujero en el hielo uno tras otro, y nosotros también podemos hacer lo mismo en nuestro propio sitio web.
Existen varias formas de hacer esto:
Bing utiliza las etiquetas HTML5 estándar para mostrar vídeos en la página principal. El vídeo incrustado tiene un tamaño fijo y no se cambia el tamaño con el navegador.
Hay listas para usar plugins jQuery, Tubular y BigVideo.js por ejemplo, que permiten utilizar fácilmente cualquier vídeo, o una serie de vídeos como fondos de página.
La otra forma más simple que se puede hacer es con etiquetas HTML y CSS (sin JavaScript) para ayudar a colocar cualquier vídeo de YouTube en el fondo de la página.
Vídeo de YouTube como fondo
Para empezar basta con pegar el código de abajo, cerca de la etiqueta de apertura
de la plantilla de la web. También debes sustituir el «ID» con el ID del vídeo real de YouTube que deseamos utilizar en el fondo. <div style="position: fixed; z-index: -99; width: 100%; height: 100%">
<iframe frameborder="0" height="100%" width="100%"
src="https://youtube.com/embed/ID?autoplay=1&controls=0&showinfo=0&autohide=1">
</iframe>
</div>
// Reemplaza ID con el código ID de tu vídeo de Youtube
Internamente, estamos usando las etiquetas IFRAME de YouTube para incrustar el vídeo de forma que ocupa toda la página (tanto en anchura y altura se fija en un 100%). Asimismo, el z-index se establece en negativo, por lo que la capa de vídeo de YouTube aparecerán varios niveles por debajo del contenido principal de la página.
La desventaja es que el vídeo de fondo no funcionará en dispositivos móviles y no es posible silenciar el sonido de un vídeo sin utilizar JavaScript.
Insertar música de fondo con YouTube
Recuerdo la época cuando los sitios web de Geocities automáticamente reproducían música de fondo tan pronto como se abría la página, para vergüenza de los trabajadores de la oficina. Se utiliza sobre todo archivos de audio como MP3, WAV o incluso el formato MIDI, para incorporar música, pero incluso se puede utilizar cualquiera de tus pistas favoritas de YouTube para incrustar el audio de fondo.
El truco es que se incrusta un vídeo de YouTube (con autoplay = 1) y se ajusta la altura y anchura del reproductor de video a cero por lo que permanece invisible. Esto se puede lograr con una sola línea de código que se pueden agregar en cualquier lugar de tu página web.
<embed height="0" width="0"
src="http://youtube.googleapis.com/v/VIDEO_ID&autoplay=1&loop=1" />
4 Mejores Plugins para Convertir videos de YouTube en Entradas de WordPress
5 Plugins para Incluir Anuncios en los Vídeos de WordPress
Como hacer un menú con efecto como Youtube
Comprobador de Enlaces Rotos de Youtube para WordPress
Plugin importador de videos de Youtube para WordPress
hola
primero que todo muchas gracias por el tutorial, al realizarlo eh tenido algunos problemas, necesito que el video de youtube se repita siempre, es un video de 20 segundos y no se como ponerlo apra que este se repita «loop».
saludos
Hola Samuel. Los de youtube están siempre haciendo cambios y hay que probar cosas nueva. Prueba con este enlace y donde pone ID incluye la referencia de tu vídeo http://www.youtube.com/embed/ID?version=3&loop=1&playlist=ID . Ya me cuentas
Como se hace mute en un video con esa misma etiquetas de las anteriores
Hola Pedro primero permiteme felicitarte por el gran trabajo que haces aquí en el blog. Segundo quería preguntarte si conoces alguna manera de reproducir una playlist en modo random. Desde ya muchas gracias.
Hola Marcelo. Mira este plugin a ver si te sirve http://codecanyon.net/item/ultimate-video-player-wordpress-plugin/8374433
Hola Pedro , mira yo deseo poner un video de youtube solo para verlo pero no para escucharlo , yo lo puse en mi pagina mientras no le den clik al sonidoe sta mudo pero cuando entra algun curioso le da la play y se escucha mi musica de fondo y la del video .. asi que tengo que entrar muchas evces a silenciar .. dime no hay otra forma de ponerlo sin el volumen? te agradecere si hubiese algo me lo hicieras saber ok buendia saluditos Tiziana
Hola Tiziana. Pues me pillas fuera de juego, aunque creo que no es posible hacer lo que comentas. Solo se me ocurre que subas el video de Youtube sin sonido
¡muchas gracias por el tutorial! Voy a ver si puedo poner alguna pagina en marcha con ello. 🙂
buenas tardes pedro me sirvio mucho el codigo pero tengo un problema me da error al momento de intentar reproducir el video ya dentro de mi pagina ¿que hago para solucionar esto?
Hola Luis. Cual es tu página?
Hola, una consulta. Yo tengo una pagina web que llama paginas internas por medio de php y al hacer eso cuando copio el codigo para el video solo se me reproduce si lo pongo en la pagina principal pero si lo pongo en la pagina que quiero llamar no me sale el video.
Hola Naty. Supongo que hay que hacer un examen a fondo de tu sitio a ver porque ocurre eso. Si conoces algún programador de php quizás te pueda echar una mano. Saludos!