Youtube Javascript API - disable related videos

Solution 1:

"rel" is a player parameter, as specified here:

https://developers.google.com/youtube/player_parameters#rel

To add player parameters to iframe players, you need to specify the playerVars property of the second constructor argument (at the time of writing this is documented here, and on the IFrame API documentation page)

e.g.

new YT.Player('playerid', {
    height: '550',
    width: '840',
    videoID: 'video_id',
    playerVars: {rel: 0, showinfo: 0, ecver: 2}
});

Solution 2:

The behavior of the rel player parameter has changed.

From documentation,

The behavior for the rel parameter is changing on or after September 25, 2018. 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

So, it's no longer possible to disable related videos. Instead playerVars: {rel:0} will change the behavior of the player and shows suggestion from specified channel.

Solution 3:

You get related videos in two places: at the end of the video with the grid, and at the bottom of the video while paused. I've figured out a way to remove them at the end and make the ones at the bottom at least tolerable for most businesses.

1. Remove related videos at the end of a video

IFrame Player API: Events

To avoid showing related videos at the end of a video, I just stopped the video so it returned to showing the thumbnail and play button:

var player = new YT.Player('player', {
   height: '390',
   width: '640',
   events: {
      'onStateChange': function(event){
         switch(event.data){
            // Stop the video on ending so recommended videos don't pop up
            case 0:     // ended
               player.stopVideo();
               break;
            case -1:    // unstarted
            case 1:     // playing
            case 2:     // paused
            case 3:     // buffering
            case 5:     // video cued
            default:
               break;
         }
      }
   }
});

You could also replace player.stopVideo(); with any other code you want to run.

2. Making related videos at the bottom of a video only show your videos

IFrame Player API: YouTube Embedded Players and Player Parameters

rel=0 no longer avoids showing any related videos; now, it will still show related videos, but at least they'll only be from your channel. This changed sometime around September 25, 2018 (documentation).

By setting playerVars in YT.Player, we can at least have related videos only show our channel's videos. The documentation isn't clear that you have to have playerVars set up as an object, but you can set it up like so:

var player = new YT.Player('player', {
   ...
   playerVars:{
      rel:              0
      modestbranding:   1,       // If you're trying to remove branding I figure this is helpful to mention as well; removes the YouTube logo from the bottom controls of the player
      // color:         'white', // Can't have this and modestbranding active simultaneously (just a note in case you run into this)
   },
   ...
});

2A. Potential way to remove related videos from bottom

I may look more into it if I have the time, but here's where an answer may lie:

We can easily access the iframe object but we can't do anything with it: IFrame Player API: Accessing and modifying DOM nodes. It appears that because we'd be editing an iframe from YouTube there are security concerns (regardless of what we'd actually be doing). Ideally I could just remove the "More videos" text with player.getIframe().contentWindow.document.querySelector('.ytp-pause-overlay.ytp-scroll-min').remove(), but when I run player.getIframe().contentWindow.document I get an error SecurityError: Permission denied to access property "document" on cross-origin object.

But playerVars also has an origin value that may let us access the iframe's object anyway:

var player = new YT.Player('player', {
   ...
   playerVars:{
      origin:           'https://mywebsite.com'
   },
   ...
});

It's not working with localhost, but that may be a Chromium and Firefox thing. Perhaps this is a legitimate option on a live site; I'll update this post when/if I try that to let you know if I succeed.

Solution 4:

The accepted solution was not working for me. What does work is:

1) Putting the iframe in html that includes the rel parameter

<iframe id="youtube-video" width="560" height="315" 
 src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&rel=0&modestbranding=1" 
 frameborder="0" enablejsapi="1" allowfullscreen></iframe>

2) Using the javascript API to attach to that existing player

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('youtube-video', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady(event) {
    console.log("ready");
}

function onPlayerStateChange(event) {
    console.log("state changed");
}

demo fiddle: http://jsfiddle.net/bf7zQ/195/