YouTube Autoplay not working

Question

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        lt body gt             lt iframe id  existing-iframe-example                width  640  height  360                src  https   www youtube com embed -SFcIUEvNOQ    autoplay 1 amp  enablejsapi 1                frameborder  0                autoplay  1                style  border  solid 4px  37474F                 gt  lt  iframe gt           lt div id  player  gt  lt  div gt            lt div id  movieButtons  class  movieButtons  gt           lt button class  movieButton  data-movieAdr  1-VjtC939 Q  gt Memorial Slide Show lt  button gt    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

User · Answer

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  lt iframe gt        lt iframe type  text html  src  https   www youtube com embed -ePDPGXkvlw autoplay 1  frameborder  0  allow  autoplay  gt  lt  iframe gt      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    lt  -- Autoplay is allowed  -- gt   lt iframe src  https   cross-origin com myvideo html  allow  autoplay  gt    lt  -- Autoplay and Fullscreen are allowed  -- gt   lt iframe src  https   cross-origin com myvideo html  allow  autoplay  fullscreen  gt        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

User · Answer

This code allows you to autoplay iframe video   lt iframe src  https   www youtube com embed 2MpUj-Aua48 rel 0 amp modestbranding 1 amp autohide 1 amp mute 1 amp showinfo 0 amp controls 0 amp autoplay 1   width  560  height  315   frameborder  0  allowfullscreen gt  lt  iframe gt    Here Is working fiddle

User · Answer

It s not working since April of 2018 because Google decided to give greater control of playback to users  You just need to add  amp mute 1 to your URL  Autoplay Policy Changes   lt iframe id  existing-iframe-example            width  640  height  360            src  https   www youtube com embed -SFcIUEvNOQ autoplay 1 amp mute 1 amp enablejsapi 1            frameborder  0            style  border  solid 4px  37474F             gt  lt  iframe gt    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

User · Answer

Remove the spaces before the autoplay 1  src  quot https   www youtube com embed -SFcIUEvNOQ autoplay 1 amp  enablejsapi 1 quot

User · Answer

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    lt div style  position  relative   gt      lt 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  gt      lt 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  gt  lt  iframe gt    lt  div gt    lt script gt     setInterval function          if document activeElement instanceof HTMLIFrameElement            document getElementById  cover   style opacity 0           document getElementById  player   style opacity 1                   50      lt  script gt    Try it on codepen  https   codepen io sarkiroka pen OryxGP

[iframe] YouTube Autoplay not working

Examples related to iframe

Examples related to youtube