Why would you want to disable related YouTube videos from displaying when an embedded video finishes playing in WordPress? The short answer: it’s all about branding.
Sometimes it is necessary for me to go deep into the weeds about code so that there is never any Mystery Meat on the plate!
In WordPress, there are two ways to embed a YouTube Video into a Post or Page. One way lets Google make all the decisions, and the other way gives you more control. I choose not to let Google pretend they are in charge.
- The first choice is to copy the link provided to your Clipboard by clicking on the COPY button or highlight it and copy. I’ll call this the Google is in charge URL LINK. This choice will allow Google and WordPress to make all the choices, including showing relevant video choices, potentially from your competitors, at the end of your video.
- Or you can use the Embed icon provided, shown with the red arrow. This will open another modal pop-up window with IFRAME CODE. You can copy/paste the iframe code provided or use the COPY link shown to copy the code to your Clipboard. This will allow us to modify the code we have on the Clipboard. BTW, an iframe is the same as having a mini browser embedded into your current browser page pointing to somewhere else.
- Now paste the iframe code you have copied to your Clipboard into Notepad. In the screenshot below, I have Format > Word Wrap turned on, so it is easier to see the one line of code.
- Here’s where the magic happens. The iframe has a src (a source URL). We need to append a QueryString to that URL that tells the Google server what to do. A QueryString is one or more key/value pairs. The QueryString appended to the end of a URL starts with a question mark (?) and then is followed by key/value pair(s). Each key and value are concatenated together using an equal sign (=), and if you use more than one key/value pair, you concatenate (append) them together using an ampersand (&). In the screenshot below, I changed the Width from 560 to 825, the Height from 315 to 464, removed the autoplay; (including the space afterwards) just before the word encrypted-media;, and appended a QueryString to the end of the src.
- So, the code went from:
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/3J7FWQqyQww” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
<iframe width=”825” height=”464” src=”https://www.youtube.com/embed/3J7FWQqyQww?rel=0&feature=oembed” frameborder=”0″ allow=”accelerometer; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
- The secret behind the key/value pairs in the QueryString, specifically rel=0 is that on Google’s Server, when they serve up the URL for the YouTube video, there is code on the Server that evaluates and makes changes according to the value in the key/value pair(s). In our case we are telling Google’s code we do not want relevant videos at the end. Only from our own YouTube Channel. Our QueryString portion of the URL looks like this:
- If you also wanted to hide the link to your YouTube Channel, your QueryString portion of the URL would look like this:
- In the newer Block Editor of WordPress, you add a Formatting > Custom HTML Block, then paste in the IFRAME CODE you have just modified. The HTML Tab will be shown by Default, but you can also click on the Preview Tab, indicated with the red arrow, to see how it will look on the page:
- If you are not using the new Block Editor, but the Classic Editor instead, click on the Text Tab and it will put you into the Code Editor mode where you can paste the iframe code in the place you decide.:
Any other parameters available for the YouTube embedded player are outside the scope of this Blog Post. For a more in-depth discussion of all of the parameters available for the YouTube embedded player, please see the Google Developer document:
YouTube Embedded Players and Player Parameters
Happy Coding and Blogging!