ReInSpirit

  • Contacto
  • Blog
  • Servicios
    • Alojamiento Web
    • Desarrollo y diseño web
  • Descuento E T
  • Sobre Nosotros

Incluir vídeos de Youtube como fondo de página web

22 marzo, 2017 por Pedro Mendez 12 comentarios

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" />

..Entradas Relacionadas

  • 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 WordPressPlugin importador de videos de Youtube para WordPress

Publicado en: Diseño Etiquetado como: fondos, youtube

Sobre el autor

Pedro Mendez. Webmaster apasionado de WordPress. Autodidacta empedernido buscando siempre nuevas fuentes de conocimientos.

Comentarios

  1. samuel moder dice

    1 enero, 2017 a las 3:36 AM

    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

    Responder
    • Pedro Mendez dice

      6 enero, 2017 a las 9:12 PM

      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

      Responder
  2. Antonio dice

    18 enero, 2017 a las 12:53 PM

    Como se hace mute en un video con esa misma etiquetas de las anteriores

    Responder
  3. Marcelo dice

    2 febrero, 2017 a las 9:24 PM

    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.

    Responder
    • Pedro Mendez dice

      3 febrero, 2017 a las 12:59 PM

      Hola Marcelo. Mira este plugin a ver si te sirve http://codecanyon.net/item/ultimate-video-player-wordpress-plugin/8374433

      Responder
  4. Tiziana dice

    2 marzo, 2017 a las 5:57 PM

    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

    Responder
    • Pedro Mendez dice

      3 marzo, 2017 a las 6:51 PM

      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

      Responder
  5. Gerardo dice

    8 junio, 2017 a las 6:30 PM

    ¡muchas gracias por el tutorial! Voy a ver si puedo poner alguna pagina en marcha con ello. 🙂

    Responder
  6. luis pacheco dice

    17 febrero, 2018 a las 1:00 AM

    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?

    Responder
    • Pedro Mendez dice

      19 febrero, 2018 a las 11:13 AM

      Hola Luis. Cual es tu página?

      Responder
  7. Naty dice

    22 julio, 2018 a las 12:58 AM

    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.

    Responder
    • Pedro Mendez dice

      22 julio, 2018 a las 11:02 PM

      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!

      Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.


Descarga gratis la guía

guia 14 plugins

Política de privacidad


Más un correo a la semana con algún truco y consejo. ¿Te apuntas?

También con regalos y ofertas

icono Twittericono Facebookicono YouTube

Archivos

Categorías

  • Blogging (5)
  • Comercio Eléctronico (48)
  • Diseño (40)
  • Email Marketing (3)
  • Genesis (4)
  • Google (14)
  • herramientas (23)
  • hosting (8)
  • Marketing en Internet (13)
  • Prestashop (4)
  • Programación (4)
  • Redes Sociales (9)
  • SEO (24)
  • Sin categoría (22)
  • Trabajo (7)
  • Wordpress (510)

© Copyright 2021 ReInSpirit.com · Todos los derechos reservados ·Aviso legal·Política de Privacidad·Dos Hermanas (Sevilla)