How can the “More videos” overlay on pause be removed from YouTube embed? Edpuzzle and Khan Academy somehow do it

问题

I want to have the "More videos" overlay not show up when an embedded YouTube video is paused.

I've seen other posts like this one or this one, but none have mentioned the fact that somehow Edpuzzle (e.g. https://edpuzzle.com/media/5e96205457b2f23efd7e8903) and Khan Academy are able to prevent the "More videos" (ytp-pause-overlay) from showing.

Is there some exception from YouTube for educational sites?

回答1:

The rel parameter is what hides the More Videos overlay, but we cannot set it because YouTube only allows certain sites to use the showinfo and rel parameters to the fullest. (You can prove this by blocking all Javascript resources from EdPuzzle or Khan Academy then loading the base iFrame API from dev tools and embedding your own video with the rel=0 and showinfo=0 parameters set. Then trying to do the same for another site, you will find that requests from Khan Academy and Ed Puzzle perform the desired behavior but requests from the other sites will not.

What the docs state:

This is a deprecation announcement for the showinfo parameter. In addition, the behavior for the rel parameter is changing. Titles, channel information, and related videos are an important part of YouTube’s core user experience, and these changes help to make the YouTube viewing experience consistent across different platforms.

Now that we know that we cannot hide the More Videos overlay on pause from the offical iFrame API what we can do is hide the top and bottom section of a player by "div cropping". A working demo can be found here. This basically hides the More Videos section but it also hides the controls, which might be undesirable.

This works because the YouTube player always centers a video, even with a really tall player. So all we have to do is make the player really tall and crop out the top and bottom.

To do the cropping we will need to wrap the iFrame with divs, so our HTML may look something like this.

<div id="player-size" style="">
  <div id="cropping-div" style="">
    <div id="div-to-crop" style="">
      <div id="player-wrapper">
        <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
        <div id="player"></div>
      </div>
    </div>
  </div>
</div>

Embedding a YouTube player will not work on Stack Overflow so instead of posting all the code here I used CodePen since they allow YouTube embedding.

Another method to hide the more videos overlay is to use rel=0 as a parameter to videos from channels with no public videos. A limitation to this method is that it will not work for all videos since channels that do have public videos will still display the more videos overlay.

Here's a playlist from my test channel with no public videos with rel=0 parameter

Here's an embed from my test channel with the rel=1 parameter

来源：https://stackoverflow.com/questions/61905510/how-can-the-more-videos-overlay-on-pause-be-removed-from-youtube-embed-edpuzz