Firefox Mac Prevents Overlay Video Playback

Question

Unfortunately, YouTube only uses videos when you click directly on the YouTube player itself. This is to prevent fraudulent viewing of a large number of views. One way, if you do not want to show YouTube to the player first, is an opaque overlay and graphic image on top of pointer-events: none . When a user clicks on your overlay, they will actually click on the YouTube video, so the view is taken into account. Then you capture the "play" event and hide the overlay displaying the player below it.

I have a graphic on my homepage, and when you click on it, it plays the video on YouTube. Before someone screams "clickjacking", I’m not trying to deceive anyone - the play button appears on the chart so that you know this video.

This works great for me for everything except FireFox on Mac OS. I am using the latest version - currently 34.0.5 in my tests.

Demo page: http://www.googledrive.com/host/0B3INRRYhLi7cVHNKTzhMdnRjT3M

• If you run this on Chrome / FireFox Windows / Recent IE and click on the green caption on which the video will play and you will hear the music.

• Note. Of course, on my real page, I grab the isplaying event and hide the overlay.

Firefox obviously does some kind of click protection. If he thinks that you are trying to trick the user into overlaying the video, he will not play it. However, it is really strange for me that it also does not do this on Windows.

There are two ways to enable video playback on Mac FireFox - both of which partially reveal Youtube videos below:

• If you click "Change Opacity To 75%", it will display the video below. If you then click on it, then it will play normally.
• If you click Make Overlapping Less, it will make the overlay completely non-closed. By clicking on it, he will play perfectly.

The most bizarre thing is - when you view it in an iframe, it works just fine (which is why I use the GoogleDrive link above, which opens in full screen mode), and not something like codepen / jsfiddle http://codepen.io/anon/ pen / GgrZNN

I am really looking for a workaround that does not include if (firefox && mac) . If this is documented somewhere in mozilla docs, I did not find it.

PS. Obviously, browsers without pointer-events must be handled differently with the on-click event. This is not shown in this example.

(I use Browserstack.com for testing, but it does the same on a real mac.)

Answer 1

I get the same problem with Firefox Mac (and have not upgraded to Yosemite yet), but it seems to me that you have solved your problem a long time ago. The simplest solution I can see is to add an extra layer of overlay under your current one and set them to 0.98 opacity (which is apparently the highest that you can go and still have a click job at least least in my tests).

Obviously, this will depend on what you hope to show on your overlay, but for my tests locally I set the bottom overlay (sorry, ridiculous name) to black. This meant that the video under it was imperceptible. You might even lower it a bit with opacity and still block everything with two layers, just in case the opacity thresholds for blocking clicks vary by version of Firefox.

 .x-overlay { opacity: 0.98; ... } .x-under-overlay { opacity: 0.98; position: absolute; background: rgba(0, 0, 0, 1); width: 100%; height: 100%; overflow: hidden; pointer-events: none; } 

NOTE: One drawback to consider when using even a little opacity. For some browsers (or at least browser versions), text that appears in a layer with opacity may result in an error or lack of smoothing. But this happened mainly in many older versions of Firefox and Chrome.

Update

Well, it got me a little around the wall, or up the bend, or some strange phrase that can be used to describe the experience of constantly waiting for one, but successively getting another ... that has terrible similarities to the definition of a madman .

Why on [insert home planet here] did this work for Codepen, but not in my own localhost-served iframe ... ??

After several attempts, I found a sandbox attribute that I really should have noticed before; especially considering all the weird cheats that he can enable and disable using his own browser processes. A quick trial and a few bugs later, and it looks like this allows you to work with most of these online violinists, is this:

 <iframe src="index.html" sandbox="allow-scripts allow-same-origin"></iframe> 

I still couldn’t find out why, but if I turned on localhost as described above, it will start working without the need for a transparency trick. I suppose this should force Firefox to route through another process, or perhaps it just disables cross-entry-level protection against cross-hijacking.

A very strange state of things ... this is the kind of oddity I would expect from Chrome! Not good ol 'firefox.