Background video youtube with loop

Question

Background video youtube with loop

Navigation

#1 by (0 votes)

0

I have to put a YouTube background video inside a div, but the video does not loop, what to do to generate the loop. The code is as follows:

<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%;

css3 video

asked by Carlos Alberto Acosta Camacho 14.09.2017 в 04:39

source

1 answer

Take data for search I can not get data from ExtJS store

score 0 · Accepted Answer

To play a single video, and play it again when it finishes, the loop parameter alone is not enough.

According to the YouTube IFrame API documentation on the player parameters , this is specified on the parameter loop :

Note: The compatibility of this parameter is limited in the AS3 player and the IFrame builds, which could load the AS3 player or the HTML5 player. Currently, the loop parameter only works with the AS3 player when used next to the parameter playlist . To loop a single video, set the loop parameter value to 1 and set the value of the in the same video ID that is specified in the player's API URL :

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

So, in addition to the parameters that you already have in the player, you must add the playlist parameter.

In this parameter a comma-separated list of IDs is specified as a value of the videos you want to play. In your case, you only want a single video to be played, then in that case you only need to specify the video ID:

playlist=VIDEO_ID

The value of the attribute src of the element iframe , without shredding, would look like this:

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

Shredded, it looks like this:

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

Code

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

You can see it in action on this JSFiddle .

Background video youtube with loop

1 answer

Code

See also