Maximillian Laumeister
Illustration of Miku the bird-fox shouting through a megaphone while flying in the sky

How To Hide Related Videos In YouTube Embeds (in 2024)

tech tutorial

When an embedded YouTube video is done playing, the YouTube player normally shows several related videos, also known as “suggested videos” or “more videos”. However, there are reasons a website owner might want to hide these - due to branding preferences or simply wanting a cleaner user experience.

You can hide YouTube related videos in WordPress by using my WordPress plugin:

Want to hide related videos in WordPress?
Get The Plugin!

If you are not using WordPress, read on.

Before September 2018, a webmaster could disable related videos on YouTube embeds by simply adding ?rel=0 to the iframe’s src like this:

<iframe width="640" height="360" src="https://www.youtube.com/embed/u7pCgFHszI4?rel=0" frameborder="0"></iframe>

However in September 2018, YouTube changed their embed code so that this rel=0 trick no longer fully removes the related videos (instead it makes it so the related videos come from the same YouTube channel as the video displayed). It is no longer possible to fully disable related videos using rel=0.

The behavior for the rel parameter is changing on or after September 25, 2018. The effect of the change is that you will not be able to disable related videos. However, you will have the option of specifying that the related videos shown in the player should be from the same channel as the video that was just played.

YouTube Player API Release Notes - August 23, 2018

This option was likely deprecated because it was not seeing a lot of use, but the sudden change has left the rest of us to wonder why rel=0 is not working to hide related videos like it used to. For those of us who still want to be able to embed YouTube videos without related videos showing at the end, there is a snippet of code we can use as a workaround. This is the final result (pay attention at the end of the video):

If you’re using WordPress, grab the plugin here to make your life much easier:

Need the WordPress version of this code?
Get The Plugin!

If you’re not using WordPress, you can integrate this code with your website:

<!-- https://maxl.us/hide-related --><style>.hytPlayerWrap{display:inline-block;position:relative}.hytPlayerWrap.ended::after{content:"";position:absolute;top:0;left:0;bottom:0;right:0;cursor:pointer;background-color:black;background-repeat:no-repeat;background-position:center;background-size:64px 64px;background-image:url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSIwIDAgNTEwIDUxMCI+PHBhdGggZD0iTTI1NSAxMDJWMEwxMjcuNSAxMjcuNSAyNTUgMjU1VjE1M2M4NC4xNSAwIDE1MyA2OC44NSAxNTMgMTUzcy02OC44NSAxNTMtMTUzIDE1My0xNTMtNjguODUtMTUzLTE1M0g1MWMwIDExMi4yIDkxLjggMjA0IDIwNCAyMDRzMjA0LTkxLjggMjA0LTIwNC05MS44LTIwNC0yMDQtMjA0eiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==)}.hytPlayerWrap.paused::after{content:"";position:absolute;top:70px;left:0;bottom:50px;right:0;cursor:pointer;background-color:black;background-repeat:no-repeat;background-position:center;background-size:40px 40px;background-image:url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHdpZHRoPSIxNzA2LjY2NyIgaGVpZ2h0PSIxNzA2LjY2NyIgdmlld0JveD0iMCAwIDEyODAgMTI4MCI+PHBhdGggZD0iTTE1Ny42MzUgMi45ODRMMTI2MC45NzkgNjQwIDE1Ny42MzUgMTI3Ny4wMTZ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+)}</style><div class="hytPlayerWrapOuter"><div class="hytPlayerWrap"> <iframe width="640" height="360" src="https://www.youtube.com/embed/u7pCgFHszI4?rel=0&enablejsapi=1" frameborder="0" ></iframe></div></div> <script>"use strict";document.addEventListener('DOMContentLoaded',function(){if(window.hideYTActivated)return;if(typeof YT==='undefined'){let tag=document.createElement('script');tag.src="https://www.youtube.com/iframe_api";let firstScriptTag=document.getElementsByTagName('script')[0];firstScriptTag.parentNode.insertBefore(tag,firstScriptTag);} let onYouTubeIframeAPIReadyCallbacks=[];for(let playerWrap of document.querySelectorAll(".hytPlayerWrap")){let playerFrame=playerWrap.querySelector("iframe");let onPlayerStateChange=function(event){if(event.data==YT.PlayerState.ENDED){playerWrap.classList.add("ended");}else if(event.data==YT.PlayerState.PAUSED){playerWrap.classList.add("paused");}else if(event.data==YT.PlayerState.PLAYING){playerWrap.classList.remove("ended");playerWrap.classList.remove("paused");}};let player;onYouTubeIframeAPIReadyCallbacks.push(function(){player=new YT.Player(playerFrame,{events:{'onStateChange':onPlayerStateChange}});});playerWrap.addEventListener("click",function(){let playerState=player.getPlayerState();if(playerState==YT.PlayerState.ENDED){player.seekTo(0);}else if(playerState==YT.PlayerState.PAUSED){player.playVideo();}});} window.onYouTubeIframeAPIReady=function(){for(let callback of onYouTubeIframeAPIReadyCallbacks){callback();}};window.hideYTActivated=true;});</script>

Video ID:

If you end up using this code, I would greatly appreciate a link back to this post as attribution, if possible!

To see the full, unminified version of the script, click here.

Under the hood, the script hooks into the YouTube API to determine whether the video is playing. When the video ends, the script shows a custom “replay” button over the entire embed. When the replay button is clicked, the video plays over from the beginning again. If the video is paused, the script shows a “play” button over the related videos box.

This code has been tested in Chrome, Firefox, Edge, and Chrome for Android. It is not designed to work with Internet Explorer.

Did I mention that I’ve written a WordPress plugin that makes this all very easy and customizable? Check it out!

Code Updates

2/1/2019: Using this code, you can now embed multiple videos on the same page! Just make sure they are all using the updated version of the code, which you can find above.

2/3/2019: Now hides related videos on pause as well as video end screen.

2/15/2019: Added a “customize embed code” button.

4/9/2019: Added a flexible, easy-to-use WordPress plugin version of the code.

4/18/2021: Fixed a bug where YouTube iFrame API code could be loaded multiple times for multiple embeds.

More Articles Tagged #tech

Comments