Maximillian Laumeister

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

By Maximillian Laumeister Share this article:

How To Remove Related Videos In YouTube Embeds 2018 Update

In September 2018, Google changed their YouTube Embed code so that related videos are always shown at the end of YouTube embeds, and the webmaster is no longer able to turn them off.

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 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:

    <style>#playerWrap{display: inline-block; position: relative;}#playerWrap.shown::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==);}</style> <div> <div id="playerWrap"> <iframe width="640" height="360" src="https://www.youtube.com/embed/0sDg2h3M1RE?enablejsapi=1" frameborder="0" ></iframe> </div></div><script>var playerFrame=document.currentScript.previousElementSibling.children[0].children[0]; var tag=document.createElement('script'); tag.src="https://www.youtube.com/iframe_api"; var firstScriptTag=document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubeIframeAPIReady(){player=new YT.Player(playerFrame,{videoId: 'M7lc1UVf-VE', events:{'onStateChange': onPlayerStateChange}});}function onPlayerStateChange(event){if (event.data==YT.PlayerState.ENDED){document.getElementById("playerWrap").classList.add("shown");}}document.getElementById("playerWrap").addEventListener("click", function(){player.seekTo(0); document.getElementById("playerWrap").classList.remove("shown");}); </script>

IMPORTANT: After you paste the code onto your site, replace the highlighted part with the Video ID of the YouTube video you want to embed.

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.

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

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

Share this article:
Subscribe to my future articles!
Subscribe by Email