My website has a player for multiple videos. I've been adapting the code to use YouTube's iframe API as the player. I can't get the videos to autoplay. Here's the relevant code:
<body> <iframe id="existing-iframe-example" width="640" height="360" src="https://www.youtube.com/embed/-SFcIUEvNOQ? autoplay=1&;enablejsapi=1" frameborder="0" autoplay="1" style="border: solid 4px #37474F" ></iframe> <div id="player"></div> <div id="movieButtons" class="movieButtons"> <button class="movieButton" data-movieAdr="1-VjtC939_Q">Memorial Slide Show</button>
The rest is standard YouTube iframe API script. You can see I tried setting Autoplay=1 as both an iframe parameter and as part of the iframe src. I've also tried including it in the data in the button. None of these seems to work. The vids load when the buttons are clicked, but they don't autoplay.
AutoPlay may not work on YouTube due to corrupt cache/data of the browser or corrupt installation of the YouTube mobile application. Moreover, an outdated browser or misconfiguration of your browser like DRM settings, etc. may also cause the error under discussion.
mute=1
or muted=1
as suggested by @Fab will work. However, if you wish to enable autoplay with sound you should add allow="autoplay"
to your embedded <iframe>
.
<iframe type="text/html" src="https://www.youtube.com/embed/-ePDPGXkvlw?autoplay=1" frameborder="0" allow="autoplay"></iframe>
This is officially supported and documented in Google's Autoplay Policy Changes 2017 post
Iframe delegation A feature policy allows developers to selectively enable and disable use of various browser features and APIs. Once an origin has received autoplay permission, it can delegate that permission to cross-origin iframes with a new feature 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">
When the feature policy for autoplay is disabled, calls to play() without a user gesture will reject the promise with a NotAllowedError DOMException. And the autoplay attribute will also be ignored.
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
<iframe id="existing-iframe-example" width="640" height="360" src="https://www.youtube.com/embed/-SFcIUEvNOQ?autoplay=1&mute=1&enablejsapi=1" frameborder="0" style="border: solid 4px #37474F" ></iframe>
Update :
Audio/Video Updates in Chrome 73
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With