Youtube video embed with autoplay and loop

Since the Youtube API update, we can no longer control certain aspects of the player with older parameters that used to work such as removing related videos on the end of a video. This is due to Youtube believing that seeing related and recommended videos helps enhance the user experience for viewers.

I needed a background video to play on a recent project, that autoplayed and looped.  Usually, I would choose Vimeo for this as it already supports a background video parameter which removes text, controls and easily allows looping and autoplay. However, in this case, the video wasn’t available on Vimeo and was only on Youtube.

So here’s the embed code I used in my project to get the Youtube video to autoplay and loop.

The secret to stop related videos and make the video loop properly is to add the playlist parameter on the end but with the SAME video ID as the current embedded video ID:

<iframe width="560" height="315" src="https://www.youtube.com/embed/AAAAAAAA?autoplay=1&mute=1&loop=1&controls=0&showinfo=0&playlist=KyNt5H_ZAq4" title="YouTube video player" frameborder="0" allow="autoplay"></iframe>

Note, all autoplay videos MUST be muted for autoplay to work.

Hope this helps!

Useful post? Share it

Leave a Reply

Your email address will not be published.