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.
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
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.
This code allows you to autoplay iframe video
<iframe src="https://www.youtube.com/embed/2MpUj-Aua48?rel=0&modestbranding=1&autohide=1&mute=1&showinfo=0&controls=0&autoplay=1" width="560" height="315" frameborder="0" allowfullscreen></iframe>
Here Is working fiddle
Remove the spaces before the autoplay=1:
src="https://www.youtube.com/embed/-SFcIUEvNOQ?autoplay=1&;enablejsapi=1"
You can use embed player with opacity over on a cover photo with a right positioned play icon. After this you can check the activeElement of your document.
Of course I know this is not an optimal solution, but works on mobile devices too.
<div style="position: relative;">
<img src="http://s3.amazonaws.com/content.newsok.com/newsok/images/mobile/play_button.png" style="position:absolute;top:0;left:0;opacity:1;" id="cover">
<iframe width="560" height="315" src="https://www.youtube.com/embed/2qhCjgMKoN4?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in- picture" allowfullscreen style="position: absolute;top:0;left:0;opacity:0;" id="player"></iframe>
</div>
<script>
setInterval(function(){
if(document.activeElement instanceof HTMLIFrameElement){
document.getElementById('cover').style.opacity=0;
document.getElementById('player').style.opacity=1;
}
} , 50);
</script>
Try it on codepen: https://codepen.io/sarkiroka/pen/OryxGP
