Maximillian Laumeister

How To Hide Related Videos In YouTube Embeds (2019 Update)

How To Remove Related Videos In YouTube Embeds 2019 Update

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

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/0sDg2h3M1RE?rel=0" frameborder="0"></iframe>

However in September 2018, YouTube changed their embed code so that this rel=0 trick no longer fully disables 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):

And this is the embed code you can use to achieve it:

<!-- https://maxl.us/hideyt --><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/0sDg2h3M1RE?rel=0&enablejsapi=1" frameborder="0" ></iframe> </div></div><script>"use strict"; document.addEventListener('DOMContentLoaded', function(){if (window.hideYTActivated) return; let onYouTubeIframeAPIReadyCallbacks=[]; for (let playerWrap of document.querySelectorAll(".hytPlayerWrap")){let playerFrame=playerWrap.querySelector("iframe"); 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 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, though not required I would greatly appreciate a link back to this post as attribution!

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. I can’t make any guarantees about how long it will continue to work in the future, because YouTube is constantly iterating on their API.

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

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.

Subscribe to my future articles!
Subscribe by Email