10

Youtube is showing a menu with video suggestions while my embedded video is paused. The element in the iframe has the class 'ytp-pause-overlay'

How can you remove it without removing controls?

Shady Mohamed Sherif
  • 15,003
  • 4
  • 45
  • 54
Sven
  • 6,288
  • 24
  • 74
  • 116

6 Answers6

5

In case you loading your videos using Javascript YouTube Player iframe API you will need to use Player Parameters and set the value of rel to 0.

Example:

player = new YT.Player( 'player', {
    height: '390',
    width: '100%',
    videoId: 'y9QEQHe8ax4',
    playerVars: { 'rel':0}
    }
);

Update in October 2018

Youtube changed the behavior of rel parameter:

The behavior for the rel parameter is changing on or after September 25, 2018. 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.

Update in October 2019

I found a workaround in case you are the owner of the videos.

  1. Use the provided code example to require Youtube to load the related videos from your channel only.

  2. In order enforcing Youtube to remove the related videos list. Simply I created a new channel and uploaded the needed videos as unlisted. You have to make sure that All the videos in the new channel are not listed which means that when Youtube tries to show the related videos from the same channel the list will be empty so Youtube doesn't show related videos menu at all.

  3. To test this solution try an incognito session or another browser because Youtube will show the related videos menu to you if you are logged in with the same account that owns the channel and has access over the unlisted videos

Community
  • 1
  • 1
Shady Mohamed Sherif
  • 15,003
  • 4
  • 45
  • 54
4

Yes it is possible. You have to use showinfo=0?ecver=2 in your iframe code.

Example: 

<iframe src="https://www.youtube.com/embed/pV1jC37ELmQ?rel=0&amp;showinfo=0?ecver=2" width="640" height="360"></iframe>
taras
  • 6,566
  • 10
  • 39
  • 50
Eswarraj
  • 41
  • 6
0

The solution for me was to add the parameter "rel" with a value of "0" to the end of the url.

According to the developers guide here, the description of the "rel" parameter is:

This parameter indicates whether the player should show related videos when playback of the initial video ends. Supported values are 0 and 1. The default value is 1.

When I set the value to "0", this parameter keeps the suggested videos from being displayed when the video is paused.

An example url would be:https://www.youtube.com/embed/ABCDEFG?rel=0

joeshmoe301
  • 1,193
  • 2
  • 11
  • 25
0

None of the proposed solutions worked for me, so I ended up adding this to the page:

<style>
.ytp-pause-overlay{
display:none;
}
</style>
Curious Mind
  • 659
  • 10
  • 26
  • 4
    Hmm, does this approach work for iframe embeds as well? I can't seem to work it out. – Daniel Hollas Feb 16 '19 at 11:18
  • Yes it does. Check this answer so you can see the best approach to affect the iframe style: https://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe – Curious Mind Feb 18 '19 at 14:43
  • @CuriousMind How do you get around the CORS restriction? – Maximillian Laumeister Jan 28 '20 at 19:17
  • In my case I had no issues, I remember reading this https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS but in my case I was using this in a kiosk, so Im not sure, but I believe I changed the browser cors policy. – Curious Mind Jan 29 '20 at 15:24
0

After trying all of these tricks (and a few from other posts as well), I still could not get rid of the ytp-pause-overlay. The only thing that DID actually work was restricting the dimensions of the iframe itself (using percentage), while setting the desired dimensions (using px) in an outer div.

Example: <div style="height: 300px; width: 350px"><iframe style="width:90%" src...></iframe></div>

(Please excuse the inline styling)

MiggyDaMic
  • 5
  • 4
0

I messed around with this for a little bit and found this solution worked for me:

my browser is chrome version 73.0.3683.86
my adblock plus is version 3.5
using adblock plus, go to its settings, click on advanced on left side, scroll down to the "My Filter List" area, add the following line:

.ytp-pause-overlay

click save, reload the webpage with the video.

I have also added the following but I do not think it is necessary to solve your exact problem but I am including the info just to be thorough. I believe this just blocks the grid of suggested/related content at the very end of the video.

/yts/swfbin/player-*/endscreen.swf
youtube.com##div.videowall-endscreen
youtube.com##watch-related

Community
  • 1
  • 1
Jason B
  • 1