Vimeo replacement widget breaks background autoplay videos

[shapiro125]

What is your browser and browser version?

Firefox 65 / Chrome 72

What is broken and where?

When a site uses Vimeo as a background autoplay video, the new widget introduced in 2019.1.30 replaces the video and prevents the ability to play it all.

Some examples can be seen at:

• https://brand.duke.edu/
• http://knpdesign.co/
• https://www.bethelu.edu/

What is the "culprit" domain?

player.vimeo.com is yellow and "replace social widgets" is enabled

What is your debug output for this domain?

**** ACTION_MAP for vimeo.com
vimeo.com {
  "userAction": "",
  "dnt": false,
  "heuristicAction": "cookieblock",
  "nextUpdateTime": 0
}
**** SNITCH_MAP for vimeo.com
vimeo.com [
  "creativecommons.org",
  "dotdash.com",
  "princeton.edu"
]

[ghostwords]

Thank you for the report!

It looks like we have to reset the pointer-events property on our replacement iframe, and then figure out how to ensure our widget takes priority over anything else on the page. Simply setting z-index on our iframe to the maximum value does not seem to be enough.

Or, figure out when the video is a background autoplay video and treat it completely differently?

[ghostwords]

More background video examples:

• https://www.naturalis.nl/
• https://sherlocked.nl/
• https://www.hollywoodbowl.com/

Here is another case, although probably a separate issue: https://midcurrent.com/videos/how-to-tie-the-walts-worm/ (powered by https://www.mediaelementjs.com/)

And another: https://gyazo.com/

[ghostwords]

We could avoid replacing background videos by updating the selector for Vimeo:

--- a/src/data/socialwidgets.json
+++ b/src/data/socialwidgets.json
@@ -197,8 +197,8 @@
     "Vimeo": {
         "domain": "player.vimeo.com",
         "buttonSelectors": [
-            "iframe[src^='https://player.vimeo.com/video/']",
-            "iframe[src^='//player.vimeo.com/video/']"
+            "iframe[src^='https://player.vimeo.com/video/']:not([src*='background=1'])",
+            "iframe[src^='//player.vimeo.com/video/']:not([src*='background=1'])"
         ],
         "replacementButton": {
             "details": "",

The above tweak might be worth releasing just by itself as many background videos either have a fallback image that our replacement unhelpfully covers, or are part of the page layout in a way that our replacement widget makes worse.

This could then be improved upon by detecting when we have one or more backgrounded Vimeo videos on the page and providing some sort of floating "activate Vimeo" in-page control.

[ghostwords]

This should (mostly) be fixed in Privacy Badger version 2019.2.19. The Vimeo replacement now tries to ignore background videos, and since Vimeo is still on the yellowlist, background videos work unimpeded.

However, we plan on removing Vimeo from the yellowlist in order to fix #188. Once we remove Vimeo, background Vimeo videos will get fully blocked and won't be shown anywhere. So this issue will become more relevant then again, and we will want to come up with a solution at some point, perhaps a special floating widget that works well with background videos.

[bcyphers]

Found another instance of this happening in the latest version: https://brave.com/about/#

[ghostwords]

Vimeo removed from the yellowlist in 4c32192
Update: Restored in 3e58334