Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

YouTube Autoplay not working

Tags:

youtube

iframe

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.

like image 372
Bewildered Avatar asked Nov 18 '16 20:11

Bewildered


People also ask

Why does my YouTube Autoplay not work?

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.


2 Answers

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.

like image 45
Dzejms Avatar answered Sep 24 '22 00:09

Dzejms


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

like image 116
Fab Avatar answered Sep 23 '22 00:09

Fab