Vimeo and Youtube Videos only work when muted

[slaweknaczynski]

Started around 2 days ago - I think with the latest Chrome update. Both vimeo and youtube videos only play when muted, when you try to increase the volume or play they stop. This includes your own examples - so easiest to replicate the issue it try your examples in chrome private mode - both do not work when you unmute:

Expected behaviour

Both Vimeo and Youtube videos to load, play without being muted

Actual behaviour

After latest Chrome update videos only play if they are muted. If there is any interaction with volume level or trying to unmute video stops and plays only when muted again

Console log:

• play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

Steps to reproduce

You can try in private mode, but also happens in normal mode. YouTube: https://codepen.io/pen?template=GGqbbJ Vimeo: https://codepen.io/pen?template=bKeXNq

Environment

• Browser: Chrome
• Version: 113.0.5672.127 (Official Build) (64-bit)
• Operating System: Windows
• Version: 3.7.8

Console errors (if any)

Link to where the bug is happening

You can try in private mode, but we have over 50 tickets from users since last Thu (when Chrome was updated) that this is happening. Those examples do not work: YouTube: https://codepen.io/pen?template=GGqbbJ Vimeo: https://codepen.io/pen?template=bKeXNq

[renaudleo]

Stumbled upon this while looking for something else but I noticed removing the polyfills from the codepen settings seems to fix the problem, so maybe there's something there. Just thought I'd let you know!

[slaweknaczynski]

Stumbled upon this while looking for something else but I noticed removing the polyfills from the codepen settings seems to fix the problem, so maybe there's something there. Just thought I'd let you know!

Thanks for letting me know. I tried all the options - with and without polyfills, older and newer version, but nothing seemed to work. Because of complaints from users we needed to stop using Plyr completely as after that chrome update it simply stopped working :(

[sampotts]

This is pretty serious, obviously. Sorry for the delay. I'll take a look tonight.

[sampotts]

I think I've found the issue. Chrome requires you to interact with the underlying iframe before it'll allow the playback to start. I'll come up with a fix tonight.

[sampotts]

It looks like they don't work in Codepen because the autoplay permission needs to be added to the permissions policy as per the docs you linked: https://developer.chrome.com/blog/autoplay/#iframe-delegation

A permissions policy allows developers to selectively enable and disable browser features and APIs. Once an origin has received autoplay permission, it can delegate that permission to cross-origin iframes with the permissions policy for autoplay. Note that autoplay is allowed by default on same-origin iframes.

<!-- Autoplay is allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay">

<!-- Autoplay and Fullscreen are allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen">

CodePen currently has the following policy set:

accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share

I'll contact Codepen to see if they can add autoplay but if you're having this issue on your own site, try adding autplay (along with fullscreen, ideally) to the permissions policy for your <iframe>.