How do I hide related videos at the end of a YouTu

问题:

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.

回答1:

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"

回答2:

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}

回答3:

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!

回答4:

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.