CODEWITHSUNDEEP
videoiframeyoutubeembedplaylist
Penanghill
Penanghill

Reputation: 715

How do I hide related videos at the end of a YouTube playlist embed code?

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.

Upvotes: 61

Views: 108444

Answers (8)

Hussamedeen
Hussamedeen

Reputation: 11

If Use WordPress install This Plugin https://wordpress.org/plugins/youtube-embed-plus/

and Activate this option enter image description here

Enjoy!

Upvotes: 0

Ankur Arora
Ankur Arora

Reputation: 390

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.

Upvotes: 0

MRRaja
MRRaja

Reputation: 1161

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

Upvotes: 4

Naved Khan
Naved Khan

Reputation: 1947

<iframe src="https://www.youtube.com/embed/0CtKuSHHPI4?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Upvotes: -1

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20359

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.

Upvotes: 9

Turner Bass
Turner Bass

Reputation: 821

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

Upvotes: 44

S.Yadav
S.Yadav

Reputation: 4509

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!

Upvotes: 2

Saumini Navaratnam
Saumini Navaratnam

Reputation: 8850

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"

Upvotes: 87

Related Questions