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

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories