58

I am using this code to embed a playlist:

<iframe width="816" height="459"     
  src="https://www.youtube.com/embed/videoseries?list=xxx" 
  frameborder="0" allowfullscreen="">

To hide the related videos, normally I add ?rel=0 (that's in the case of a single video embed), but if I try it here:

<iframe width="816" height="459" src="https://www.youtube.com/embed/videoseries?list=PL4Zkb_7gMrOzZlVy7jIeCjwScavYp6ssm?rel=0" 
 frameborder="0" allowfullscreen="">
 </iframe>

I get the "bad video" fuzzy YouTube screen (sorry, I don't know the technical term for this)!

There is no "hide related" option in the YouTube "SHOW MORE" settings for the playlist.

rogerdpack
  • 62,887
  • 36
  • 269
  • 388
Penanghill
  • 685
  • 1
  • 5
  • 11

7 Answers7

82

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"
Saumini Navaratnam
  • 8,439
  • 3
  • 42
  • 70
  • 1
    Thanks for your answer. The `&` worked! The playlist embed no longer shows the related videos after playing the last video. – Penanghill Mar 31 '16 at 08:46
  • 7
    If your embed looks more like this: `https://www.youtube.com/embed/FlQ3AuD2UAw` you may need to use a `?` instead of an `&`. Everything after the `?` is called the query string, and new attributes after the first one are separated by the `&` character. So, if there is no `?` in your URL that is what you would start with instead of `&`. – Subtlebot Feb 16 '18 at 05:45
  • 5
    Unfortunately as of September 2018, `rel=0` [only restricts related videos to your own channel rather than fully disabling them.](https://www.maxlaumeister.com/blog/hide-related-videos-in-youtube-embeds/) – Maximillian Laumeister Dec 17 '18 at 17:04
  • how to remove next and previous button in iframe youtube android https://stackoverflow.com/questions/75896996/how-to-remove-hide-next-and-previous-button-in-iframe-youtube-in-android – Gyan Swaroop Awasthi Apr 03 '23 at 09:31
43

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

Community
  • 1
  • 1
Turner Bass
  • 801
  • 8
  • 20
8

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.

Maximillian Laumeister
  • 19,884
  • 8
  • 59
  • 78
  • I am not sure i understand this code piece exactly. you define a player, and function, but when is the function being executed? When $(document).ready? on load? When is it being executed? I tried to do in on ready, but seem to get error with this type of constructor? – anita Jan 17 '19 at 17:55
  • The `onYouTubeIframeAPIReady` and `onPlayerStateChange` functions are hooks for the YouTube API. They get executed as callbacks by the official YouTube API script. They need to be in the global scope to work, so if you are wrapping this code, you will need to assign them to the `window` object. – Maximillian Laumeister Jan 17 '19 at 17:59
  • Not sure I understand how you will attach a function to the window function? I mean it should already be globally available? – anita Jan 17 '19 at 18:10
  • @anita Functions that are defined using *function declaration* syntax are only globally available if they are in the outermost scope, i.e. loose in the ` – Maximillian Laumeister Jan 17 '19 at 18:20
  • hmm.. I think i managed properly to create the YT.Player, The problem is that I am not able to trigger the events, and the callback function don't get called. – anita Jan 18 '19 at 08:35
4

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

MRRaja
  • 1,073
  • 12
  • 25
2

I passed one more parameter as '?rel=0' to stop related videos.
That worked for me as-

'https://www.youtube.com/embed/'+someValiable_of_video_link+'?rel=0';

Hope may work for others also. & instead of ? does not worked!

S.Yadav
  • 4,273
  • 3
  • 37
  • 44
1

As everyone has mentioned that rel=0 no longer works, Yes they are right but there is a trick that I currently use.

Youtube player needs a certain height of player in order to display the 'related/more videos' section so if you manage to keep the height below 250px then it works.

The below embed code works because the height is 250px and the Youtube player does not show that section for me.

<iframe width="490" height="250" src="https://www.youtube-nocookie.com/embed/RDWKxDgZfz8?controls=0&rel=0&enablejsapi=1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen;"></iframe>

Please also note that this trick can hide that section when you pause/play the video, you will still see that when the video ends.

Ankur Arora
  • 194
  • 3
  • 15
-1
<iframe src="https://www.youtube.com/embed/0CtKuSHHPI4?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Naved Khan
  • 1,699
  • 16
  • 13
  • 3
    While this code might answer the question, can you consider adding some explanation for what the problem was you solved, and how you solved it? This will help future readers to understand your answer better and learn from it. – dan1st Mar 04 '20 at 10:38