JavaScript YouTube Player: Turning off suggested videos

Other Questions YouTube
1

I’m trying to figure out how to stop YouTube from showing related videos at the end of my embedded player. I’m using the JavaScript API but can’t find a clear way to do this.

Here’s what I’ve got so far:

let videoPlayer = new YT.Player('videoContainer' + videoNum, {
  height: '480',
  width: '720',
  videoId: videoCode
});

I tried adding ?rel=0 to the videoId and even put relatedVideos: false in the options, but neither worked.

Is there a secret setting I’m missing? How can I turn off those suggested videos using the JavaScript API? Any help would be awesome!

2

hey alexm, i feel ya. youtube can be tricky. have you tried setting the ‘rel’ parameter in the playerVars object? something like this:

playerVars: {
  'rel': 0
}

it worked for me last time i tried. hope it helps!

3

I’ve been down this road before, and it can be frustrating. The trick is to use the ‘playerVars’ option in your YT.Player configuration. Here’s what worked for me:

let videoPlayer = new YT.Player('videoContainer' + videoNum, {
  height: '480',
  width: '720',
  videoId: videoCode,
  playerVars: {
    'rel': 0,
    'modestbranding': 1
  }
});

The ‘rel’: 0 parameter should disable related videos at the end. ‘modestbranding’: 1 is a bonus that removes most YouTube branding, which I find cleaner.

Keep in mind that YouTube’s policies sometimes change, so this might not work forever. But it’s been reliable for me in recent projects. Hope this helps solve your issue!

4

yo alexm, i get ur struggle. the playerVars thing is key. try this:

playerVars: {
  'rel': 0,
  'showinfo': 0
}

‘rel’: 0 kills related vids, ‘showinfo’: 0 hides extra stuff. worked for me recently. good luck man!

5

hey alexm, dont stress it. youtube’s a pain sometimes. have u tried this yet?

playerVars: {
  'rel': 0,
  'showinfo': 0,
  'fs': 0
}

it shuts down related vids, hides extra stuff, and blocks fullscreen. worked for me last week. give it a shot!

6

I’ve encountered this issue before, and it can be quite tricky. While the ‘rel’ parameter in playerVars is a good start, it’s not always 100% effective. In my experience, combining multiple parameters yields better results. Try this approach:

let videoPlayer = new YT.Player('videoContainer' + videoNum, {
  height: '480',
  width: '720',
  videoId: videoCode,
  playerVars: {
    'rel': 0,
    'showinfo': 0,
    'iv_load_policy': 3,
    'fs': 0
  }
});

This configuration disables related videos, hides video info, turns off annotations, and disables fullscreen. It’s worked consistently for me across various projects. Just be aware that YouTube’s API can change, so always check their latest documentation for any updates.

7

yo alexm, been there done that. the playerVars trick is cool, but sometimes youtube’s sneaky. try this:

playerVars: {
  'rel': 0,
  'showinfo': 0,
  'controls': 1
}

plus add some css to hide that annoying overlay:

.ytp-pause-overlay { display: none !important; }

works like a charm for me. good luck dude!

8

I’ve wrestled with this issue in a few projects, and I’ve found that sometimes you need to get a bit creative. While the playerVars approach is solid, I’ve had success by combining it with some CSS trickery. Here’s what worked for me:

First, set up your player with the usual playerVars:

let videoPlayer = new YT.Player('videoContainer' + videoNum, {
  height: '480',
  width: '720',
  videoId: videoCode,
  playerVars: {
    'rel': 0,
    'showinfo': 0
  }
});

Then, add this CSS to your stylesheet:

.ytp-pause-overlay {
  display: none !important;
}

This CSS targets the overlay that YouTube uses to display related videos. By hiding it, you ensure that even if YouTube tries to show suggestions, they won’t appear.

It’s not the most elegant solution, but it’s been reliable in my experience. Just remember to test thoroughly, as YouTube’s interface can change unexpectedly.

9

I’ve dealt with this issue in several projects. While the ‘rel’ parameter is often suggested, it’s not always foolproof. In my experience, a more robust approach involves using a combination of player parameters and some additional JavaScript.

Try this setup:

let videoPlayer = new YT.Player('videoContainer' + videoNum, {
  height: '480',
  width: '720',
  videoId: videoCode,
  playerVars: {
    'rel': 0,
    'showinfo': 0,
    'controls': 1,
    'modestbranding': 1
  },
  events: {
    'onStateChange': onPlayerStateChange
  }
});

function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.ENDED) {
    event.target.stopVideo();
  }
}

This configuration not only attempts to disable related videos but also stops the player when the video ends, preventing any suggestions from appearing. It’s been the most reliable method in my projects so far.