59

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.

Improve this question

7 Answers 7

Reset to default
84

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"
Improve this answer
4
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

Improve this answer
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.

Improve this answer
5
  • 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, 2019 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, 2019 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, 2019 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 <script> tag, not nested within another function. If they are nested, then to be globally available they need to be explicitly assigned to the window object using a variable assignment, instead of using the function declaration syntax.
    – Maximillian Laumeister
    Jan 17, 2019 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, 2019 at 8: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

Improve this answer
1

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!

Improve this answer
1
  • 2
    this has been deprecated. The rel flag now only toggles related videos from same channel or otherwise
    – saurabhlahoti
    Jul 12, 2019 at 5:25
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.

Improve this answer
-1 
<iframe src="https://www.youtube.com/embed/0CtKuSHHPI4?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Improve this answer
1
  • 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 4, 2020 at 10:38

Not the answer you're looking for? Browse other questions tagged or ask your own question.