Youtube Javascript API - disable related videos

Question

Right, this seems to be poorly documented or I can\'t see it in the documentation. I basically want no related videos (?rel=0) using the JavaScript API.

Answer 1

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/

Answer 2

Here is a Quick solution:

setInterval(function(){
    if($('iframe').length > 0){
        $('iframe').each(function(){
            if($(this).hasClass('gotYou')){
                //do nothing
            }else{
                var getMySrc = $(this).attr('src');
                var newSrc = getMySrc.split('?');
                console.log(newSrc);
                var freshURL = newSrc[0]+'?rel=0&'+newSrc[1];
                console.log(freshURL);
                $(this).addClass('gotYou');
                $(this).attr('src', freshURL );         
            }
        });
    }
}, 1);

What it does it, it looks for the iframe in your document. If it finds iframe, it grabs the src of the iframe, finds the ? mark and then replaces ? by ?rel=0& . Here the goal is to out rel=0

Answer 3

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.

Answer 4

"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}
});

Answer 5

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.

Answer 6

If you're using SWFObject, you simply need to do something like this:

function loadVideo() {
        var params = { allowScriptAccess: "always" }
            , atts = { id: "myvideo" }
        ;
//NOTE THE END OF THE BELOW LINE vvvvvv
        swfobject.embedSWF("https://www.youtube.com/v/[video id here]?enablejsapi=1&playerapiid=myvideo&version=3&rel=0"
         , "videoplaceholderid"
         , "768", "432", "8", null, null, params, atts);
    }

Just add rel=0 to the end of your url.