Now a days I see lot of people facing issue with autoplay of iFrame embedded videos when we click on thumbnail or any button associated with it.
In previous post how to display youtube thumbnails instead of embedding the iframe to reduce page load time I already discussed about how we can embed YouTube with the help of it’s thumbnail. But later on I came across with one issue that the autoplay was not working when clicks on thumbnail. So to enable the autoplay we need to pass “allow” property in the iframe tag along with autoplay = 1 in the src URL.
It’s not working since April of 2018 because Google decided to give greater control of playback to users. You just need to add &mute=1 to your URL.
Autoplay Policy Changes
Google said : Now that Progressive Web Apps (PWAs) are available on all desktop platforms, we are extending the rule that we had on mobile to desktop: autoplay with sound is now allowed for installed PWAs. Note that it only applies to pages in the scope of the web app manifest.https://developers.google.com/web/updates/2019/02/chrome-73-media-updates#autoplay-pwa
However, if you wish to enable autoplay with sound you should add allow="autoplay"
to your embedded <iframe>
. Like the example given below.
<iframe src="URL/?autoplay=1&enablejsapi=1" width="300" height="169" frameborder="0" allowfullscreen="" scrolling="no" allow="autoplay; encrypted-media" wmode="Opaque"></iframe>
Please let me know if you still facing issues.
Pingback: How to display YouTube thumbnails instead of embedding the iframe to reduce page load time - Lokesh Gupta