Reputation: 53
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?
Upvotes: 5
Views: 5285
Reputation: 114
The rel parameter is what hides the More Videos overlay, but we cannot use the full feature because YouTube only allows certain sites to do so.
example: rel=0 on khan academy hides the overlay but not on your site.
What the docs state:
This is a deprecation announcement for the showinfo and rel parameter. 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 when the user pauses with the official iFrame API. What we can do is use a more "hacky" solution.
Method 1:
Simply 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.
Method 2:
Another method to hide the more videos overlay is to use rel=0 parameter to videos from channels with no public videos. A limitation to this method is that the videos must be from a channel with all videos unlisted or private.
correction: it seems like this behavior has changed, now embedded videos from channels with no public videos will no longer show the "more videos", "related videos" overlay regardless of the rel parameter in your embedds.
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
Upvotes: 6