0

Debo poner un video de youtube de fondo dentro de un div, pero el video no hace loop, que hacer para que se genere el loop. el codigo es el siguiente:

<div class="video-background"><div class="video-foreground"><iframe src="https://www.youtube.com/embed/JA6RTwGdTVY?controls=0&autoplay=1&loop=1&showinfo=0&rel=0" frameborder="0" allowfullscreen></iframe></div></div>

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
1
  • Observación (irrelevante para tu pregunta, pero que la voy a abordar indirectamente en el código de la respuesta): Los nombres de clases que usas en tu código HTML no coinciden con los que usas en tu hoja de estilo. el 20 sep. 2017 a las 12:56

1 respuesta 1

1

Para reproducir un solo video, y que este se vuelva a reproducir cuando termine, el parámetro loop por sí solo no es suficiente.

De acuerdo a la documentación de la API de IFrame de YouTube sobre los parámetros del reproductor, se especifica esto sobre el parámetro loop:

Nota: La compatibilidad de este parámetro es limitada en el reproductor AS3 y en las incorporaciones IFrame, que podrían cargar el reproductor AS3 o el reproductor HTML5. Actualmente, el parámetro loop solo funciona con el reproductor AS3 cuando se usa junto al parámetro playlist. Para reproducir en bucle un solo video, establece el valor de parámetro loop en 1 y establece el valor del parámetro playlist en el mismo ID de video que se especifica en la URL de la API del reproductor:

http://www.youtube.com/v/VIDEO_ID?version=3&loop=1&playlist=VIDEO_ID

Por lo que, en adición a los parámetros que ya tienes en el reproductor, debes añadir el parámetro playlist.

En este parámetro se especifica como valor una lista separada por comas de los IDs de los videos que quieres reproducir. En tu caso, solo quieres que se reproduzca un solo video, entonces en ese caso solo necesitas especificar la ID del video:

playlist=VIDEO_ID

El valor del atributo src del elemento iframe, sin desmenuzar, quedaría así:

https://www.youtube.com/embed/JA6RTwGdTVY?playlist=JA6RTwGdTVY&controls=0&autoplay=1&loop=1&showinfo=0&rel=0

Desmenuzado, se ve así:

https://www.youtube.com/embed/JA6RTwGdTVY? 
playlist=JA6RTwGdTVY    /* Nuevo parámetro */ 
controls=0&                                
autoplay=1&                                
loop=1& 
showinfo=0&
rel=0

Código

<div class="video-background">
    <div class="video-foreground">
        <iframe src="https://www.youtube.com/embed/JA6RTwGdTVY?playlist=JA6RTwGdTVY&controls=0&autoplay=1&loop=1&showinfo=0&rel=0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

Lo puedes ver en acción en este JSFiddle.

Véase también

4
  • Perfecto, muchas gracias el 28 sep. 2017 a las 0:30
  • Funciona perfecto pero me genera otro inconviente, y es q en version movil no funciona el autoplay el 28 sep. 2017 a las 1:57
  • El autoplay por defecto suele no funcionar en entorno móvil, en esos casos la reproducción se gatilla solo si se inicia por interacción del usuario. Está en la misma documentación de la API de IFrame de YouTube. el 28 sep. 2017 a las 12:01
  • Gracias campeón!, buscando tu fuiste el único que me di la respuesta exacta!
    – Carrobe90
    el 25 may. 2022 a las 2:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.