1244495 - YouTube HTML5 embedded video control buttons are hidden

Status: RESOLVED DUPLICATE of bug 1247733

(Web Compatibility :: Site Reports, defect)

Comment 1

[Alice0775 White]

STR
1. Start Firefox with new profile
2. Open http://www.youtube.com/embed/XGSy3_Czz8k
3. Click Play button
   --- then, observe video control buttons are drawn properly.
4. Repeat Step2 and Step3
   --- then, you can observe the bug

Actual Results:
Video control buttuns are gone.

Expected Results:
Not so

Comment 2

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Did we regress or did youtube regress?

Comment 3

[Alice0775 White]

(In reply to David Baron [:dbaron] ⌚️UTC+11 (busy, returning 8 February) from comment #2)
> Did we regress or did youtube regress?

I think this is Firefox bug.
Because, it works at 1st time. but different behavior on same URL at 2nd time and more.
And I cannot reproduce on Chrome.

Comment 4

[Alice0775 White]

Clearing "Site Preferences"[1] fixes the problem temporarily.

[1] Alt > "History" > "Clear Recent History" > "Everything" > Check "Site Preferences" > Clear Now"

Comment 5

[Chris Peterson [:cpeterson]]

I can reproduce this bug, but only if I navigate to the YouTube page by clicking on the link in this bug (either opening it in the current tab or a new tab). If I copy the URL and paste it into the address bar, then the YouTube player controls show up as expected.

Now that I've loaded the YouTube page a few times, it shows up on my about:newtab page. Clicking on the embed page's tile on about:newtab shows the player controls as expected, unlike clicking on the YouTube link from this bug.

Note that the YouTube player controls are NOT missing. They are just hidden. If you click in the right place, you can still open the Settings menu or fullscreen button.

Comment 6

[Semtex]

I see this problem on this site, for example: http://www.wiocha.pl/1320873,Bajka-o-rycerzu-Kaczynskim
There is YT vid with no controls. I can repro. this bug on most pages with embed vids form YT.

Comment 7

[owenw4rd]

The bug with the hidden youtube HTML5 player buttons is happening on the Windows version of Firefox, but not on the OS-X version. For me it only happens with the embedded player, not the one on the youtube site. See attachment "youtube embedded HTML5 player with hidden controls.jpg"

I've seen it on Windows 7 and 10.

Comment 8

[owenw4rd]

Attachment: youtube embedded HTML5 player with hidden controls.jpg

Screen capture of an embedded youtube HTML5 player with most of the controls hidden.

Comment 9

[owenw4rd]

Looks like the embedded youtube HTML5 player shows controls on some sites but not others. On this page, the embedded YT HTML5 video shows the controls every time: http://nymag.com/following/2016/01/youtubers-at-war-over-those-react-videos.html

Comment 10

[vct]

I can reproduce the same problem.

No controls in FF Windows here:
http://www.calellatv.cat/

but the controls appear using Chrome

Comment 11

[Casey]

(In reply to Semtex from comment #6)
> I see this problem on this site, for example:
> http://www.wiocha.pl/1320873,Bajka-o-rycerzu-Kaczynskim
> There is YT vid with no controls. I can repro. this bug on most pages with
> embed vids form YT.

I think that the bug has got something to do with Firefox not loading the buttons properly via non-https connection. For example if the address of the video on the above page is changed from "http://www.youtube.com/embed/..." to https, then the buttons show up fine. Same goes for my own website which uses protocol-relative URLs, if I access it via regular http, then the buttons don't show up, but everything's via HTTPS.

That's all that I've been able to figure out.

Comment 12

[sunkast]

(In reply to Casey from comment #11)
> 
> I think that the bug has got something to do with Firefox not loading the
> buttons properly via non-https connection. For example if the address of the
> video on the above page is changed from "http://www.youtube.com/embed/..."
> to https, then the buttons show up fine. Same goes for my own website which
> uses protocol-relative URLs, if I access it via regular http, then the
> buttons don't show up, but everything's via HTTPS.
> 
> That's all that I've been able to figure out.

This has been pretty much been my experience as well. Buttons are hidden via non-https, but are visible via https.

Comment 13

[owenw4rd]

If you paste a non-https embedded youtube URL into the address bar, it appears to get replaced with the https version, but still plays with no visible controls. Even a hard page refresh doesn't make a difference. The https url has to be entered directly from the address bar for the controls to be visible.

Comment 14

[mata987]

I can confirm the bug also happens on 
Windows 8.1
Kubuntu 15.10 x64

Versions: 44 (stable) + 46 (DevEd)

Comment 16

[Loic]

Another example from dupe:
http://www.wcat-tv.org/2016/01/winthrop-town-council-january-19-2016/

Comment 17

[kalviskajaks]

More people complaining on Reddit
https://www.reddit.com/r/firefox/comments/458ir9/missing_youtube_player_buttons/

Comment 18

[Dana Keeler (she/her) (use needinfo) [:keeler]]

This isn't a PSM issue. This needs to be re-triaged.

Comment 19

[Jared Wein [:jaws] (please needinfo? me)]

I ran a regression test on this (treating non-playing HTML5 videos as 'good') and landed on bug 747257, which appears to be a bug that enabled HTML5 videos.

This appears to be an evangelism issue and I think it's on YouTube's side.

Here are my reduced STR:
Open http://www.youtube.com/embed/XGSy3_Czz8k
Note that the page gets redirected to https://www.youtube.com/embed/XGSy3_Czz8k
Play video, see controls at bottom
Modify URL back to http://www.youtube.com/embed/XGSy3_Czz8k (removing the 's' from 'https') and load page again
Play video, see controls missing at bottom

Comment 20

[Jared Wein [:jaws] (please needinfo? me)]

Kev, do we have a contact at YouTube that we can reach out to? Embedded YouTube players have been broken in all versions of Firefox since at least January 30th.

Comment 21

[Chris Peterson [:cpeterson]]

@ Kev, Jared: I will follow up with a contact on the YouTube web team.

@ Daniel, does this look like a layout issue? The video player's buttons are clickable, but not visible.

I think this is a YouTube regression because it even affects ESR 38.

Comment 22

[Mike Taylor [:miketaylr]]

I think we need to understand what the actual issue is before asking Youtube to fix it (which will increase the odds of us getting a timely response.

Taking a look now...

Comment 23

[Chris Peterson [:cpeterson]]

/me removing needinfo for Daniel since Mike is investigating.

The problem only happens when the embed URL specifies http:// and redirected to https://. The video player's buttons are clickable, but not visible.

GOOD (controls are visible) : https://www.youtube.com/embed/C4qgAaxB_pc
BAD (controls are hidden): http://www.youtube.com/embed/C4qgAaxB_pc

Comment 24

[Mike Taylor [:miketaylr]]

Attachment: not-working (left) vs working (right).png

This is odd. Inspecting the "play" button, and the styles appear to be applied in different orders (see screenshot). Not sure if devtools bug or network doing different things with the CSS.

(but I still don't see why the <button><svg></button> should be hidden in the broken one)

Comment 25

[Jared Wein [:jaws] (please needinfo? me)]

@Chris, this regression dates back to at least Firefox 15 (see comment #19)

Comment 26

[Daniel Holbert [:dholbert]]

It looks like this has to do with the <use> element inside the button (pointing to #ytp-2) -- that seems to be failing to resolve.

Given comment 23, my current theory is that this is sort of like a flavor of bug 838395.  Something like the following might be happening:
 (1) We initially load the page as HTTP; that gets stored as its origin somewhere.
 (2) We upgrade to a secure (https) connection, via HSTS (strict transport security).
 (3) So the <use> element's reference to the <path> is resolved as being https://[URL]#ytp-2
 (4) Some security-check rejects this <use> reference as being cross-origin, because it thinks we're still HTTP and the HTTPS uri is a different origin.

Or something like that.

Comment 27

[Mike Taylor [:miketaylr]]

I think you're onto something there Daniel:

https://miketaylr.com/bzla/ytplay.html -> You see youtube animated play triangle 
http://miketaylr.com/bzla/ytplay.html -> 301 to https://miketaylr.com/bzla/ytplay.html -> no visible play triangle

Comment 28

[Daniel Holbert [:dholbert]]

I spun off bug 1247733 for the Gecko bug that YouTube is tripping over here.

This bug here can track workarounds (if any) that we want to suggest to YouTube.  (For now, I think the only workaround is to avoid depending on <use> here, if they can -- or, avoid 301 http->https redirects, but I don't think that's an option.)

Comment 29

[avada]

(In reply to Chris Peterson [:cpeterson] from comment #23)
> /me removing needinfo for Daniel since Mike is investigating.
> 
> The problem only happens when the embed URL specifies http:// and redirected
> to https://. The video player's buttons are clickable, but not visible.
> 
> GOOD (controls are visible) : https://www.youtube.com/embed/C4qgAaxB_pc
> BAD (controls are hidden): http://www.youtube.com/embed/C4qgAaxB_pc

I've been experiencing invisible controls on youtube, and not just while it's embedded. 

I've been seeing this sporadically for several months.

Comment 30

[Alice0775 White]

(In reply to (Limited internet connection 2/12) Jared Wein [:jaws] (please needinfo? me) from comment #19)
> I ran a regression test on this (treating non-playing HTML5 videos as
> 'good') and landed on bug 747257, which appears to be a bug that enabled
> HTML5 videos.
> 
> This appears to be an evangelism issue and I think it's on YouTube's side.
> 
> Here are my reduced STR:
> Open http://www.youtube.com/embed/XGSy3_Czz8k
> Note that the page gets redirected to
> https://www.youtube.com/embed/XGSy3_Czz8k
> Play video, see controls at bottom
> Modify URL back to http://www.youtube.com/embed/XGSy3_Czz8k (removing the
> 's' from 'https') and load page again
> Play video, see controls missing at bottom

No this is definitry Firefox bug. See comment #0 and comment #4.

Comment 31

[Alice0775 White]

(In reply to David Keeler [:keeler] (use needinfo?) from comment #18)
> This isn't a PSM issue. This needs to be re-triaged.

Deleting SiteSecurityServiceState.txt also fixes the problem temporarily.

Comment 32

[Dana Keeler (she/her) (use needinfo) [:keeler]]

(In reply to Alice0775 White from comment #30)
> (In reply to (Limited internet connection 2/12) Jared Wein [:jaws] (please
> needinfo? me) from comment #19)
> > I ran a regression test on this (treating non-playing HTML5 videos as
> > 'good') and landed on bug 747257, which appears to be a bug that enabled
> > HTML5 videos.
> > 
> > This appears to be an evangelism issue and I think it's on YouTube's side.
> > 
> > Here are my reduced STR:
> > Open http://www.youtube.com/embed/XGSy3_Czz8k
> > Note that the page gets redirected to
> > https://www.youtube.com/embed/XGSy3_Czz8k
> > Play video, see controls at bottom
> > Modify URL back to http://www.youtube.com/embed/XGSy3_Czz8k (removing the
> > 's' from 'https') and load page again
> > Play video, see controls missing at bottom
> 
> No this is definitry Firefox bug. See comment #0 and comment #4.

I'm not saying it's not a Firefox bug. I'm saying it's not a PSM bug. Even if deleting the HSTS information fixes the symptoms, the root cause is elsewhere (see bug 1247733).

Comment 33

[Daniel Holbert [:dholbert]]

(In reply to Alice0775 White from comment #30)
> No this is definitry Firefox bug.

You're right, there is a Firefox bug here -- see comment 26 & comment 28. (though it's not Security:PSM)

Per comment 28, I've spun off bug 1247733 to cover the platform bug here, starting with a clean testcase & a clean slate.   So: might be worth having this bug here cover the specific instance of this problem at YouTube (and any workarounds that we want to suggest).

Comment 34

[Daniel Holbert [:dholbert]]

(Alternately, if there's no tech evang that we can usefully do here, we could just dupe this to bug 1247733.)

Comment 35

[Karl Dubost💡 :karlcow]

Yes I would like us to avoid asking YouTube workarounds when they do things correctly. We have already a lot of things in Google family for things which are more edgy (aka using no standard things.) I would be in favor of duping it and raise the priority of fixing the platform bug as it is quality related for a big platform.

Very cool analysis daniel and mike.

Comment 36

[Chris Peterson [:cpeterson]]

SGTM. Let's dupe this YouTube issue to Daniel's bug 1247733.

Comment 37

[owenw4rd]

(In reply to Owen Ward from comment #7)
> The bug with the hidden youtube HTML5 player buttons is happening on the
> Windows version of Firefox, but not on the OS-X version. For me it only
> happens with the embedded player, not the one on the youtube site. See
> attachment "youtube embedded HTML5 player with hidden controls.jpg"
> 
> I've seen it on Windows 7 and 10.

With OS X (10.11.3) FF version 44.0.2, it is now happening there as well.

Comment 38

[Daniel Holbert [:dholbert]]

(In reply to avada from comment #29)
> I've been experiencing invisible controls on youtube, and not just while
> it's embedded. 
> 
> I've been seeing this sporadically for several months.

avada: do you by chance have HTTPS Everywhere installed? That would explain why you've been seeing this for a while. (see bug 1250770)

Comment 39

[avada]

(In reply to Daniel Holbert [:dholbert] from comment #38)
> (In reply to avada from comment #29)
> > I've been experiencing invisible controls on youtube, and not just while
> > it's embedded. 
> > 
> > I've been seeing this sporadically for several months.
> 
> avada: do you by chance have HTTPS Everywhere installed? That would explain
> why you've been seeing this for a while. (see bug 1250770)

Yes, I am. 
I'll check out that bug.