YouTube video playback doesn't start when the video is muted

[carelevers]

Describe the bug

When attempting to start playback of a YouTube video while it is muted, the video doesn't start. This issue occurs in chrome or chromium based browsers. It behaves normally in firefox.

Steps to reproduce

The issue also occurs in the provided glitch demo playground : https://glitch.com/edit/#!/vlitejs-youtube-video

However, i noticed this playground runs on vlite-js release 5, so I remixed a glitch environment to vlite-js 6.0.3 where the issue also occurs: https://glitch.com/edit/#!/sage-quilted-hippopotamus

It also works when you preview in a new window with glitch, but it doesn't work when it's previewed in the preview pane

Expected behavior

Youtube video's should playback whether muted or unmuted.

Screenshots and recordings

https://github.com/vlitejs/vlite/assets/11197996/0854bc89-a8ee-4752-9348-471a66c41b1a

Vlite.js

6.0.3

Browser

Chrome 126.0.6478.62 (Officiële build) (64-bits)

OS

Windows 11

Additional context

No response

[yoriiis]

Hello @carelevers, thanks for your report!

I've tested the Youtube example with muted option and the video start correctly on poster click. If the video is in autoplay mode also. Can you share a reproductible example?

[carelevers]

Hello @yoriiis, thanks for the quick response,

I updated the issue with a screen recording of this example: https://glitch.com/edit/#!/sage-quilted-hippopotamus, in a Chrome incognito window with all extensions disabled.

[yoriiis]

@carelevers I think the issue is on Glitch only. Do you reproduce the same issue outside of this site?

[carelevers]

Hmm, yes, I am also experiencing the same issue on some sites where we use vlite with the YouTube provider. Additionally, in other sandbox environments, the issue persists: https://jsfiddle.net/a3tv6zpf/

https://github.com/vlitejs/vlite/assets/11197996/cec70615-84dc-42d7-a284-4fed131525ce

I don't know if there are other ways to reproduce this behavior?

[carelevers]

I also receive a warning when autoplay is set to true and muted is set to true. When I unmute the video, I get the following warning:

[yoriiis]

Sorry for the delay, I think the problem is visible when the player is inside an other iframe. Glitch and JSFiddle use iframe to sandbox the content.

The url of the Glitch iframe works: https://vlitejs-youtube-video.glitch.me But if I create an iframe with this url, the problem is visible.

Are you using Vlitejs in an iframe? Normally the problem is only present in this case.

[yoriiis]

I also receive a warning when autoplay is set to true and muted is set to true. When I unmute the video, I get the following warning:

This warning is normal because automatic playback with sound requires user interaction; it is the browser that decides whether sound will be activated, not Vlitejs.

More info from Chrome: https://developer.chrome.com/blog/autoplay

[carelevers]

Hi, I managed to fix it! It wasn’t something with Vlitejs after all, sorry for the confusion :)

The issue was actually with this header in my .htaccess : Header always set Permissions-Policy "accelerometer=self, autoplay=self, camera=(), gyroscope=self, magnetometer=(), microphone=(), payment=(), publickey-credentials-get=(), usb=()"

Specifically, the autoplay=self policy

Thanks for the help anyway!