6

I am trying to hide related videos that shows up when you pause a video but as I found out from similar questions that 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.

Here is the JSFiddle.

Also the parameter showinfo=0 dosen't work anymore which was used to hide the video title, watch later button and the share button. It is deprecated as of September 25, 2018 but somehow KhanAcademy is still able to hide those including the related videos. Are they using a different API?

Hiding the related videos altogether like Khan Academy does or overlaying a thumbnail on top to hide the related videos will work for me.

DragonBorn
  • 1,809
  • 5
  • 20
  • 44

2 Answers2

6

So I found an open source player which does hide all the related videos including the title, the share and watch later button.

The player name is Plyr.

HTML: 

<div class="plyr__video-embed" id="player">
    <iframe src="https://www.youtube.com/embed/9C1leq--_wM??origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1" allowfullscreen allowtransparency allow="autoplay"></iframe>
</div>

You can initialize it with:

const player = new Plyr('#player', {});

// Expose player so it can be used from the console
window.player = player;

CSS to hide the related videos:

.plyr__video-embed iframe {
    top: -50%;
    height: 200%;
}

Here's the JSFiddle. It's working perfectly for me.

DragonBorn
  • 1,809
  • 5
  • 20
  • 44
3

From September 25, 2018 youtube has changed their API. So, you can't disable the related videos but you can specify a list that can be shown. https://developers.google.com/youtube/player_parameters#rel

I already tried all possible answers provided below You can try the code here:https://jsfiddle.net/ibrth/0zx7o6rs/62/ and https://jsfiddle.net/ibrth/z9tk1q3r/

function onYouTubeIframeAPIReady() {
    player = new YT.Player('video-placeholder', {
        width: 600,
        height: 400,
        videoId: '0sDg2h3M1RE',
        playerVars: {
            color: 'white',
            playlist: 'taJ60kskkns,FG0fTKAqZ5g',
            rel:0,
            enablejsapi:1,
            modestbranding: 1, showinfo: 0, ecver: 2
        },
        events: {
            onReady: initialize
        }
    });
}

I found the answer here:

Youtube Javascript API - disable related videos and
https://webmasters.stackexchange.com/questions/102974/how-to-remove-the-related-videos-at-end-of-youtube-embedded-video

I_Al-thamary
  • 3,385
  • 2
  • 24
  • 37
  • I tried the [link](https://www.onlinegdb.com/fork/rJLICm3XE) for the demo. It still enters the Pause state while using the progress bar. – DragonBorn Jan 28 '19 at 07:41
  • @DragonBorn you can see the code here and it works: https://onlinegdb.com/rJLICm3XE – I_Al-thamary Jan 28 '19 at 07:49
  • No it doesn't. [Run it](https://onlinegdb.com/SJ81w427E) and click anywhere on the progress bar and you can see an alert popup when it shouldn't. – DragonBorn Jan 28 '19 at 08:03
  • @DragonBorn could you tell me which browser that you used. – I_Al-thamary Jan 28 '19 at 08:52
  • I used Google Chrome – DragonBorn Jan 28 '19 at 09:33
  • @i_th I'm not sure I understand. In the jsfiddle you just updated, there is no progress bar at all and in the rest of the examples, in pause I can see the related videos. – Mosh Feu Jan 28 '19 at 11:20
  • @MoshFeu it can't be disabled as mentioned in the answer but when I pause the video there is no related video https://ibb.co/3pKKd1s – I_Al-thamary Jan 28 '19 at 11:33
  • @MoshFeu I think the adblock prevented it. – I_Al-thamary Jan 28 '19 at 11:36
  • 1
    Make sense :) I blocked ad block in jsfiddle. – Mosh Feu Jan 28 '19 at 11:38
  • 1
    I can understand that google has changed that but I am still getting those related videos but KhanAcademy are able to hide it. – DragonBorn Jan 28 '19 at 11:52
  • @DragonBorn KhanAcademy maybe uses a commercial channel and they still provide them this service. See this:https://developers.google.com/youtube/player_parameters#rel – I_Al-thamary Jan 28 '19 at 11:54
  • That might be it. – DragonBorn Jan 28 '19 at 11:55
  • @DragonBorn if you have your own channel, you can turn off the advertisement and it may work: http://orgspring.com/turn-off-ads-youtube-videos/ good luck. – I_Al-thamary Jan 28 '19 at 14:12
  • 2
    From KhanAcademy's own site, both google branding and the related videos overlay are completely absent. But if you take a KhanAcademy video and embed it on another site, they appear as expected. The youtube dev docs don't seem to mention anything about this - they say that the related videos (and modest branding) will now always appear. – thund Mar 15 '19 at 20:06