Vimeo video does not play on chrome desktop v89 in Plyr.io 3.6.4

[darkylmnx]

Expected behaviour

Expecting the player to play on Vimeo videos like in regular videos or YouTube videos.

Actual behaviour

When I click on play for Vimeo videos it tries to play but then does pause immediately. Sometime when I reload it works normally, sometimes it doesn't work. It's pretty random and only in Chrome apparently.

Steps to reproduce

https://codesandbox.io/s/broken-shadow-v8lls?file=/src/App.vue

Environment

• Browser: Chrome
• Version: 89
• Operating System: Windows
• Version: 10
• Plyr: 3.6.4

Console errors (if any)

vue-plyr.esm.js?666c:3 Unrecognized feature: 'autoplay,fullscreen,picture-in-picture'

Link to where the bug is happening

https://codesandbox.io/s/broken-shadow-v8lls?file=/src/App.vue

or https://codepen.io/darkylmnx/pen/RwKNJbW (without Vue)

[capi1O]

I was not able to reproduce the issue on the vimeo demo website => https://player.vimeo.com/api/demo

Click on (external) play button plays the video normally in Chrome 89 despite not muted.

After further investigation it turns out that adding some props to the iframe allow attribute did the trick.

allow="autoplay; fullscreen; accelerometer; encrypted-media; gyroscope;picture-in-picture" (copied from vimeo demo website).

I made a demo here => https://codesandbox.io/s/vimo-player-api-test-s0x19?file=/index.html:236-685

In the meantime here is the workaround:

el.setAttribute("allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture");

from https://github.com/vimeo/player.js/issues/389#issuecomment-466648134

[capi1O]

The iframe creation is done here => https://github.com/sampotts/plyr/blob/aa3378fd7303c42059728155719ff57952bb0fcc/src/js/plugins/vimeo.js#L107

I will try to make a PR.

[darkylmnx]

Will this change appear if I just yarn update? Because you didn't do any version bumb @sampotts from what I see

[darkylmnx]

@sampotts @didrip still no update of the fix on npm, and there's no way to force those attributes with your current API...

Any workaround? This issue is causing a lot of problems in production...

[capi1O]

I have built plyr. js with the fix here if it can help => https://plyr-js.netlify.app/

ex https://plyr-js.netlify.app/plyr.polyfilled.min.js

[joshangehr]

I have been using this workaround since the issue transpired. Thanks again, @didrip.

[darkylmnx]

@didrip thanks, I think I can try to use this with a bit of webpack alias configurations. I'm in a Vue environnement with deps that depend on import Plyr from 'plyr', that's the tricky part.

Thanks again.

[capi1O]

I published it on npm just for you! This is quick and dirty and untested though => npm install plyr-fix.

Edit: if you have dependencies that depend on plyr AFAIK you need to rebuild them so they use plyr-fix module instead of plyr.

[darkylmnx]

@didrip actually it's even worst than that, i'm using vue-plyr, and this package hard-codes import Plyr from 'plyr', so I actually need to fork it, and edit it to use your build.

Thanks for the build!

[darkylmnx]

@didrip it seems in your build play/pause on screen click doesn't work anymore.

[sampotts]

I've pushed a new build - v3.6.5. Can you give it a go?

[darkylmnx]

@sampotts well I'm using vue-plyr which seems to have hard-coded your old version inside it's build. After some manual testing, 3.6.5 seem to have fixed the issue, but the bug is so random, I'm not sure of anything at this point.

But now... In fullscreen everything is black...

[pianomansam]

@darkylmnx it looks like the black full-screen bug is being tracked on https://github.com/sampotts/plyr/issues/2175

[lvidal1]

I am facing the same issue with the Vimeo videos on my site. Did anyone find a fix to this?

[fekajin]

still happening same issue

[sampotts]

Please check the demo site. If it's working there, you need to upgrade to latest.