3

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?

stvar
  • 6,551
  • 2
  • 13
  • 28
Daniel Bollo
  • 33
  • 1
  • 4

1 Answers1

4

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

jon
  • 96
  • 1
  • 5
  • Great answer. You mentioned "YouTube only allows certain sites to use the showinfo and rel parameters to the fullest" -- do you have any idea how I can contact YouTube to get such an exception? – Daniel Bollo Jun 03 '20 at 23:19
  • @DanielBollo I'll look around and email the help email to see if there's a set path to gain access to these parameters – jon Jun 04 '20 at 00:43
  • @DanielBollo They didn't respond to me but perhaps contacting google sales, which can be found here [link](https://gsuite.google.com/contact/) might be fruitful. I also found another method to hide the more videos overlay which is if you make all your videos unlisted and set the rel=0 parameter then your videos won't have the overlay. Take a look at [link](https://www.youtube-nocookie.com/embed/TaHZm5NJ74g/?rel=0), this channel has only one public video but to be safe it will be better to have a channel that has no public video since rel=0 will only recommend videos from that channel – jon Jun 05 '20 at 21:38
  • I also noticed that edpuzzle has a google api key and client id exposed in their front end code which probably means that they support google sign in which means that they use gapi (google api) perhaps this might be the reason why they can hide the more videos overlay on every video. Haven't gotten around to testing this theory yet though. – jon Jun 05 '20 at 21:41
  • Thank you so much for the additional comments. The hiding of the videos overlay if my videos are unlisted won't work because my site allows anyone to annotate any video, and not just their own. Regarding Edpuzzle -- we use Google sign-in, and there's a More Videos overlay on our site, so I don't think that makes a difference. I think my best bet as this point is what you also mentioned -- to contact their sales and ask around. You're super awesome for helping me so much with this, and I really appreciate it! – Daniel Bollo Jun 06 '20 at 03:02