How do I hide related videos at the end of a YouTube playlist embed code?
IN 2020 MY CODES ARE WORKING
<iframe src="https://www.youtube.com/embed/J1djNpVf4Ew?rel=0&enablejsapi=1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen;"></iframe>
No Any Suggested Video Suggested By Youtube in This Embed Video
YouTube prevents hiding related videos using rel=0
as of September 2018.
However, you can work around this by using the YouTube Player API to show custom HTML instead of related videos.
Here is some example code that displays a custom "replay" button over the video once it completes, hiding the related videos:
<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>
For the most up-to-date code, including the minified version, description, demo, and instructions, view my blog post on the subject.
As of September 25th 2018 there is no way to disable the related videos from displaying.
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.
To be more specific:
- Prior to the change, if the parameter's value is set to 0, then the player does not show related videos.
- After the change, if the rel parameter is set to 0, the player will show related videos that are from the same channel as the video that was just played.
added emphasis
You have to use the '&' when adding more parameters to the url. Update the src field with following.
"https://www.youtube.com/embed/videoseries?list=PL4Zkb_7gMrOzZlVy7jIeCjwScavYp6ssm&rel=0"