Often times we want to embed a Youtube video on our websites. These days this is very easy thanks to the embed option Youtube provides.
By visiting the Youtube video and clicking Share > Embed, we are presented with an embed code to use on our sites like below:
<iframe width="560" height="315"
src="https://www.youtube.com/embed/TfuNwm3D3Qc?si=Oi1Ybty4EQ-fmV5a"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>However sometimes we want to autoplay the embedded video. This is done by adding &autoplay=1 to the end of the video URL (embed below is also muted for your convenience):
...src="https://www.youtube.com/embed/TfuNwm3D3Qc?si=Oi1Ybty4EQ-fmV5a&autoplay=1"...If you are not using the embed code provided by the Youtube page as-is, you will want to make sure that you have the allow=autoplay; attribute. Autoplay may not work without it.
Autoplay not working with only &autoplay=1
In some situations and browsers, it is possible for the autoplay to not work even after adding &autoplay=1. In these situations, you may also have to mute the video.
You can mute the video in your embed by adding &mute=1 to the embed url. This parameter seems to be no where to be found in the embed player documentation, however it will embed the video while being muted:
<iframe width="560" height="315"
src="https://www.youtube.com/embed/TfuNwm3D3Qc?si=Oi1Ybty4EQ-fmV5a&autoplay=1&mute=1"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>So the final parameters you want to add to the embed URL would be &autoplay=1&mute=1 . This should make sure that the video will autoplay on your website on most modern browsers.
References:
https://developers.google.com/youtube/player_parameters
https://developers.google.com/youtube/iframe_api_reference
Attributions:
Website Vectors by Vecteezy