- The regular YouTube Embed block does not work properly on this website (I still don’t know why).
2. The video below is the result you get using the YouTube Block – a better way to embed… block. Unfortunately there doesn’t appear to be a way to make the block autoplay the video. This means we need an alternate solution.
3. Alternatively you can use the Custom HTML block to add the YouTube video using an HTML iframe (an iframe is a specific piece of HTML code that allows you to pull information from a variety of external sources like YouTube).
To get the code for a specific YouTube video you need to visit the video in question on the YouTube website. Once you are at the video you can click on the Share button located below the video. This will open a Share popup window (see below) where you will be able to see several sharing options. The one you are interested in is the Embed option (far left).
Click on the Embed button and you will see an Embed Video window that contains the code for an iframe specific to the video. Near the bottom right should be a copy ‘button’ (just the word ‘Copy’).
Clicking the word ‘Copy’ will copy the code to your clipboard. Now return to the backend of your website (the page where you want the video to appear) and insert a Custom HTML block where you want the video to appear.
Paste the iframe code that you copied earlier into the Custom HTML block. Once the code is pasted into the Custom HTML block you will need to make a small adjustment to the code in order to make it autoplay.
Within the iframe code is the URL for the actual video. The URL will look something like this:
https://www.youtube.com/embed/TqX-0z3xha8
or this:
https://www.youtube.com/embed/TqX-0z3xha8?si=z92BIDnWqdUmlksW
If there is a question mark in the URL you will want to add the following to the end of the URL… &autoplay=1&mute=1&rel=0
If there is no question mark in the URL you will want to add the following to the end of the URL… ?autoplay=1&mute=1&rel=0
It should now look like the example below.
<iframe width="560" height="285" src="https://www.youtube.com/embed/TqX-0z3xha8?si=z92BIDnWqdUmlksW&autoplay=1&mute=1&rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
or
<iframe width="560" height="285" src="https://www.youtube.com/embed/TqX-0z3xha8?autoplay=1&mute=1&rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>Essentially what you are doing is adding autoplay=1 to make the video play when the page loads as well as adding mute=1 to turn off the sound. NOTE: Some modern browsers will not allow autoplay to function without also muting the audio.
This may seem a little complicated but I’ll try to explain in layman’s terms… If the YouTube ID (the string of characters that appears after /embed/; in this case TqX-0z3xha8) does not have a question mark in the URL then the autoplay=1 should start with a question mark ( ?autoplay=1 ) but if there is a question mark in the URL (like in the first example above, i.e. TqX-0z3xha8?si=z92BIDnWqdUmlksW) you need to start autoplay with an ampersand (&autoplay=1). The reason for this is that there can only be one question mark in a URL.
The ampersands act as a sort of separator between the different commands, like autoplay and mute and rel (i.e. autoplay=1&mute=1&rel=0). The examples above also include the ‘rel‘ tag which limits the video thumbnails that appear when you pause the video or reach the end of the video. The string rel=0 limit the thumbnails that appear to those created by the same creator as the current video (i.e. you). This helps to prevent unwanted content from appearing.