How To Set An Embedded Youtube Video Autoplay And Loop

In this topic,

We are going to see how to set an embedded youtube video autoplay and loop.

First of all, open a video on youtube then click on the share button, then click the embed button.

After clicking on the embed button a popup will be open.

Then copy the iframe and place it in your HTML.

<iframe width="560" height="315" src="https://www.youtube.com/embed/q5jEY92Amgw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Now if I want to autoplay the video, first I have to pass the “autoplay” parameters in the link. This parameter specifies whether the initial video will automatically start to play when the player loads. Supported values are 0 or 1. The default value is 0.

Now I will pass the parameters in the iframe src.

<iframe width="560" height="315" src="https://www.youtube.com/embed/q5jEY92Amgw?autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

If I pass this parameter the video will not autoplay. If I want to autoplay the video I have to pass the mute parameters.

<iframe width="560" height="315" src="https://www.youtube.com/embed/q5jEY92Amgw?autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Now the video will start autoplay.

Now I want to add a loop to the video so that the video is finished and restarted.

So, First of all, I copy the video id and pass it into the “playlist” parameters. then I pass the “loop” parameters.

<iframe width="560" height="315" src="https://www.youtube.com/embed/q5jEY92Amgw?autoplay=1&&mute=1&playlist=q5jEY92Amgw&loop=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

So, now my video started to autoplay and loop.

Review the below video.

I hope you guys found something useful  ??

4 Comments

  1. ferhat

    video not working at the mobile phone

    0
    0
    Reply
  2. Beepboop

    If you don’t want your video to be muted, just delete the mute part or don’t put it in your code in the first place, which is helpful if you want auto-playing music. Hope this little tidbit helps someone!

    1
    0
    Reply
  3. Discover Mt.Kenya

    Thank you.

    1
    0
    Reply
  4. Dimsum

    Hey there, im just wondering why it is needed to be muted before autoplay parameter is considered. Thanks!

    1
    0
    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe

Select Categories