Closed Bug 1244495 Opened 9 years ago Closed 9 years ago

YouTube HTML5 embedded video control buttons are hidden

Categories

(Web Compatibility :: Desktop, defect)

Product:
Web Compatibility
Component:
Desktop
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(firefox44 wontfix, firefox45 affected, firefox46 affected, firefox47 affected, firefox-esr38 wontfix, firefox-esr45 ?)

Status:
RESOLVED DUPLICATE of bug 1247733
Tracking Flags:
Tracking Status
firefox44 --- wontfix
firefox45 --- affected
firefox46 --- affected
firefox47 --- affected
firefox-esr38 --- wontfix
firefox-esr45 --- ?

People

(Reporter: alice0775, Unassigned)

References

(
URL
)

Details

(Keywords: qawanted, reproducible, Whiteboard: [parity-IE] [parity-Chrome][parity-Edge])

Attachments

(2 files)

youtube embedded HTML5 player with hidden controls.jpg
(deleted), image/jpeg
Details
not-working (left) vs working (right).png
(deleted), image/png
Details 
      No description provided.
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
Summary: Video control buttuns are missing → Video control buttons are missing
Summary: Video control buttons are missing → Youtube HTML5 embedded video control buttons are missing
Version: Trunk → 37 Branch
Keywords: reproducible
Did we regress or did youtube regress?
(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.
Clearing "Site Preferences"[1] fixes the problem temporarily.

[1] Alt > "History" > "Clear Recent History" > "Everything" > Check "Site Preferences" > Clear Now"
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.
Summary: Youtube HTML5 embedded video control buttons are missing → YouTube HTML5 embedded video control buttons are hidden
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.
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.
Screen capture of an embedded youtube HTML5 player with most of the controls hidden.
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
I can reproduce the same problem.

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

but the controls appear using Chrome
(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.
(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.
Component: Layout → Security: PSM
See Also: → https://bugzilla.mozilla.org/show_bug.cgi?id=1240566
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.
I can confirm the bug also happens on 
Windows 8.1
Kubuntu 15.10 x64

Versions: 44 (stable) + 46 (DevEd)
Keywords: qawanted
Whiteboard: [parity-IE] [parity-Chrome][parity-Edge]
This isn't a PSM issue. This needs to be re-triaged.
Component: Security: PSM → Untriaged
Product: Core → Firefox
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
Component: Untriaged → Desktop
Product: Firefox → Tech Evangelism
Version: 37 Branch → Firefox 15
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.
Flags: needinfo?(kev)
@ 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.
Flags: needinfo?(kev) → needinfo?(dholbert)
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...
/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
Flags: needinfo?(dholbert)
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)
@Chris, this regression dates back to at least Firefox 15 (see comment #19)
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.
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
Depends on: 1247733
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.)
(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.
(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.
Component: Desktop → Security: PSM
Product: Tech Evangelism → Core
Version: Firefox 15 → Trunk
(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.
(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).
Component: Security: PSM → Desktop
Product: Core → Tech Evangelism
(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).
(Alternately, if there's no tech evang that we can usefully do here, we could just dupe this to bug 1247733.)
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.
SGTM. Let's dupe this YouTube issue to Daniel's bug 1247733.
Status: NEW → RESOLVED
Closed: 9 years ago
Resolution: --- → DUPLICATE
(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.
No longer depends on: 1247733
(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)
Flags: needinfo?(dqeswn)
(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.
Flags: needinfo?(dqeswn)
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: