silencesys / silentbox

A lightbox inspired Vue.js component.
https://silentbox.rocek.dev
MIT License
296 stars 50 forks source link

Chrome doesn't allow YouTube Autoplay #48

Closed maskott closed 3 years ago

maskott commented 3 years ago

I have a simple <silent-box> implementation that uses a single :image where the src is a YouTube video with autoplay set to true. Everything works perfectly in Firefox and Safari, but Chrome does not seem to respect the autoplay and forces a user 1 additional click to start the video once the lightbox is opened.

Some cursory research seems to show adding allow="autoplay" on the embedding iframe element may allow Chrome to achieve this autoplay functionality. I will try to fork and investigate.

maskott commented 3 years ago

Upon further inspection, I see that my resulting iframe element currently has an attribute like allow="accelerometer;,true;,encrypted-media;,gyroscope;,picture-in-picture". I believe the true; to be a bug. 🐛 I think the boolean representing autoplay is being displayed instead of the string autoplay which is causing the iframe not to properly let Chrome know it is alright to autoplay a video with sound (because a user has already launched said video).

silencesys commented 3 years ago

Hey, thanks for letting me know! I'll fix that tomorrow, seems I forgot to check that attribute with last PR. :) Or you can do PR If you want to.