Hide related videos Youtube Iframe API

Question

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.

Unrelenting

I'm not sure I understand. If I remove all the js code from your jsfiddle it works for me well. streamable.com/h8261 – Forfeit

The person who downvoted, can you tell me why? What needs to improved? – Unrelenting

@MoshFeu Streamable is blocked in my country – Unrelenting

Which service are you using? – Forfeit

Service for sharing videos? like Streamable? – Forfeit

@MoshFeu I don't know about other alternatives to streamable – Unrelenting

Are you see more videos in this fiddle? jsfiddle.net/jvz1etpr/1 Because I don't (And I don't have adblock on jsfiddle) – Forfeit

No obviously because that channel does not have any other videos. When I give a different channel that has multiple videos then more videos is coming. I will add a different video it in my fiddle – Unrelenting

Check the fiddle now. You can see more videos while pausing – Unrelenting

It might be best to do it in the same way as YouTube itself does it on some of its help pages. For example this YouTube Help page has an embedded YouTube video like that. – Eupatrid

Answer 1

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.

Unrelenting

This is not working on my end. it's disapying related video after finishing that clicp. – Divvy

It's working for me. I see end screens that the video uploader added towards the end of the video, but not recommended videos after the video. – Eupatrid

The top of Plyr's readme links to an issue that links to another issue that recommends migrating from Plyr to Vidstack. – Eupatrid

Answer 2

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

Eisele

I tried the link for the demo. It still enters the Pause state while using the progress bar. – Unrelenting

@Unrelenting you can see the code here and it works: onlinegdb.com/rJLICm3XE – Eisele

No it doesn't. Run it and click anywhere on the progress bar and you can see an alert popup when it shouldn't. – Unrelenting

@Unrelenting could you tell me which browser that you used. – Eisele

I used Google Chrome – Unrelenting

@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. – Forfeit

@MoshFeu it can't be disabled as mentioned in the answer but when I pause the video there is no related video ibb.co/3pKKd1s – Eisele

@MoshFeu I think the adblock prevented it. – Eisele

Make sense :) I blocked ad block in jsfiddle. – Forfeit

I can understand that google has changed that but I am still getting those related videos but KhanAcademy are able to hide it. – Unrelenting

@Unrelenting KhanAcademy maybe uses a commercial channel and they still provide them this service. See this:developers.google.com/youtube/player_parameters#rel – Eisele

That might be it. – Unrelenting

@Unrelenting if you have your own channel, you can turn off the advertisement and it may work: orgspring.com/turn-off-ads-youtube-videos good luck. – Eisele

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. – Polymerization

rel:0 seems to be working (2024) – Hylomorphism