YouTube's titlebar and "More videos" shows when user is logged in and video paused/stopped

[gavin310]

Expected behaviour

"More videos" should not show up when "rel=0" is present.

Actual behaviour

"More videos" shows up.

Environment

• Browser: Chrome
• Version: 66.0.3359.181
• Operating System: macOS v10.13.4
• Version: v3.3.8

Steps to reproduce

Embed any YouTube video.

Maybe YouTube has modified their embedding behavior?

[friday]

If using your own embed code you mean? Does it happen if you skip it and use only the plyr element (no progressive enhancement)?

It doesn't seem to happen at https://plyr.io/#youtube

[gavin310]

Thanks for the quick response. I'm actually seeing the "More videos" element when the video at https://plyr.io/#youtube is paused or ended.

[friday]

Can you try what happens if you open in an incognito window?

There is already an issue for the titlebar showing when a user is logged in on youtube, which strangely doesn't happen to me.

[gavin310]

You're right! In an incognito window it doesn't show up, and neither do any of the other annoying YouTube elements.

[friday]

Unfortunately there doesn't seem like there is much to do to avoid this. It seems to be a recent change. Googling doesn't turn up much either, except an unanswered stack overflow question.

Perhaps dig around in your youtube settings to see if you somehow opted in for this. It seems to happen to a minority of users who are logged in.

[gavin310]

Thanks a lot for your help and suggestions. I'll poke around some more and see if I can figure anything out.

[friday]

I'll keep it open since there's useful information in here that may help others.

[adhesiv]

This is happening to us as well - but only certain users see it, only on Chrome, and we can't source the differentiator. Worse part is that it's displaying unlisted video metadata.

Here's our embed code (redacted on purpose) to show that we're using all the suppression options.

<iframe id="youtube-9488" frameborder="0" allowfullscreen="1" allow="autoplay; encrypted-media" title="Video Title" width="640" height="360" src="https://www.youtube.com/embed/randomcode?autoplay=0&controls=0&rel=0&showinfo=0&iv_load_policy=3&cc_load_policy=0cc_lang_pref=en&wmode=transparent&modestbranding=1&disablekb=1&origin=https://www.website.com&enablejsapi=1&widgetid=1"></iframe>

Any idea what user setting is causing this?

[jamesrockett]

I noticed this the other day with one of my Google accounts. I double-checked the YouTube embed URL (looked correct) and no matter what attributes I changed I would still see the same thing (video title and related videos). The only thing that fixed it was signing out and then back in to the same Google account... went back to the same embedded video and it looked correct.

(I could not replicate it at the time with any of my other Google accounts)

I'm thinking/hoping its just a temporary issue on Google's side.

[miketierce]

I didn't appreciate this behavior but I think found a clever way around it by toggling a variable from the pause/stopped player events that will hide the iframe and display the poster image at the same size and an external play button that then hides the poster and brings back the iframe.

[iamrobert]

With youtube, the rel parameter has now changed and you can no longer disable:

https://developers.google.com/youtube/player_parameters#release_notes_08_23_2018

Now if rel is set to 0, related videos will come from the same channel as the video that was just played.

[karimbk]

this "More videos" feature when pausing the video, is SO annoying! And the most annoying thing in it, that they don't care about people watching with subtitles, and try to pause to actually READ them. When you pause, the "More videos" Panel pops out, and the subtitles disappear, and even more annoying, is that you can't play further with the "space-bar" on the keyboard, as the active panel will be the "More videos" panel, and have to use the mouse to continue watching! I really don't get the absurdity of this feature!

[igorbuts]

Hi guys, maybe there are some updates on this over the year?

I also would like to disable this More videos panel.

[Ivanca]

The closest thing I found to a solution is just to blur the video when is paused, unfortunately it blurs the title as well because its inside the youtube iframe:

.plyr iframe {
    transition: 0.2s filter linear;
}

.plyr.plyr--paused iframe {
    filter: blur(1.5rem);
} 

[hellodit]

The closest thing I found to a solution is just to blur the video when is paused, unfortunately it blurs the title as well because its inside the youtube iframe:

.plyr iframe {
    transition: 0.2s filter linear;
}

.plyr.plyr--paused iframe {
    filter: blur(1.5rem);
} 

Hii thanks for your solution, I think this is the best solution for now.

[iamrobert]

@hellodit

I did it this way:

https://codepen.io/iamrobert/pen/GRpZdQm

So the info bar is still visible on the screen.

[mveenstra]

Another unintended side effect of YouTube's update is that all of the focusable elements in the YouTube video such as the "More videos" or "copy link" icon are still keyboard accessible. This means that blurring the "More videos" approach may cause confusion for keyboard users as they will not be able to see what they are focused on. Something to consider.

Currently, the poster image overlay prevents mouse users from being able to click on the YouTube elements altogether - this is also confusing because the "copy link" icon does not do anything and attempting to close the "more videos" panel via the "X" icon also does not work. Overall, the UX is affected by the update.

To allow the user to click on the YouTube elements and avoid confusion, I added some CSS to update the overlay when the video is paused.

// player paused state after video has been played, does not cover any focusable elements for mouse users .plyr--paused { .plyr__poster { width: auto !important; } }

// player paused state on initial page load to keep poster image intact, before the video has been played .plyr--stopped.plyr__poster-enabled { .plyr__poster { width: 100% !important; } }

Hopefully this is helpful to anyone with accessibility requirements :)

[muhamadsyahrulmubarok]

Hi i have example plyr disabling suggestion from one of video in this site https://zulu.id/ Maybe you guys can make sample codepen from that example. :+1:

[dy]

Following this comment, since youtube centers video, it's possible to trick iframe overflow to hide title/info as:

.plyr iframe[id^=youtube] {
  top: -50%;
  height: 200%;
}

[lucasdalpra]

Try:

.plyr iframe[id^=youtube] {
	opacity: 1;
	-webkit-transition: all 500ms;
	transition: all 500ms;
}

.plyr.plyr--paused iframe[id^=youtube] {
	opacity: 0;
	-webkit-transition: all 150ms;
	transition: all 150ms;
}

Or:

.plyr iframe {
	transition: 1s filter;
	filter: opacity(1);
}

.plyr.plyr--paused iframe {
	filter: opacity(0);
	transition: 0.2s filter;
}

.plyr--paused .plyr__poster {
	z-index: 2;
	min-width: 100%;
	min-height: 100%;
	position: absolute;
	opacity: 1;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

I use both altogether.

[the-poor-gamer-124]

Thanks to the last 2 answers!!! Huge thanks, you saved me a ton of work! Only problem is when user doubleclicks on video ( full screen )

update, i was wrong, the code to be used is

`

iframe { pointer-events: none; }

`

[jelkomme]

@dy

I have a query regarding the CSS code you provided for the YouTube iframe, which worked flawlessly. However, when I try to enlarge the video on mobile phones by toggling to full screen mode, the video gets overly stretched, resulting in parts of it being cut out. Is there a way to adjust the code to accommodate smartphones' full screen mode, or perhaps disable the code altogether when full screen mode is applied on mobile phone screens?

im talking about this code:

.plyr iframe[id^=youtube] { top: -50%; height: 200%; }

[dy]

Yes, I guess something like this would work (sorry, out of context now)

@media all and not (display-mode: fullscreen) {
.plyr iframe[id^=youtube] {
  top: -50%; 
  height: 200%;
}
}

[Ijazweb]

how to hide after pause video appears More shorts