Hide related videos Youtube Iframe API

问题

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.

回答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.

回答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

来源：https://stackoverflow.com/questions/54363321/hide-related-videos-youtube-iframe-api

标签

javascript

youtube-iframe-api