How to embed an autoplaying YouTube video in an iframe

Question

I am trying to embed the new iframe version of a YouTube video and get it to auto play    As far as I can tell  there is no way of doing this by amending flags to the URL  Is there a way to do it by using JavaScript  amp  the API

User · Answer

Nowadays I include a new attribute  allow  on iframe tag  for example      allow  accelerometer  autoplay  encrypted-media  gyroscope    picture-in-picture    The final code is    lt iframe src  https   www youtube com embed  VIDEO-CODE  autoplay 1   frameborder  0  style  width  100   height  100    allow  accelerometer  autoplay  encrypted-media  gyroscope  picture-in-picture  gt  lt  iframe gt

User · Answer

1 - add  amp enablejsapi 1 to IFRAME SRC  2 - jQuery func        iframe your video   0  contentWindow postMessage    event   command   func   playVideo   args                Works fine

User · Answer

Since April 2018  Google made some changes to the Autoplay Policy  You not only need to add the autoplay 1 as a query param  but also add allow  autoplay  as an iframe s attribute So you will have to do something like this   lt iframe src  quot https   www youtube com embed VIDEO ID autoplay 1 quot  allow  autoplay  gt  lt  iframe gt

User · Answer

The embedded code of youtube has autoplay off by default  Simply add autoplay 1at the end of  src  attribute  For example    lt iframe src  http   www youtube com embed xzvScRnF6MU autoplay 1  width  960  height  447  frameborder  0  allowfullscreen gt  lt  iframe gt

User · Answer

2014 iframe embed on how to embed a youtube video with autoplay and no suggested videos at end of clip  rel 0 amp amp autoplay    Example Below      lt iframe width  640  height  360  src    www youtube com embed JWgp7Ny3bOo rel 0 amp amp autoplay 1  frameborder  0  allowfullscreen gt  lt  iframe gt

User · Answer

To use javascript api    lt script type  text javascript  src  swfobject js  gt  lt  script gt     lt div id  ytapiplayer  gt      You need Flash player 8  and JavaScript enabled to view this video     lt  div gt      lt script type  text javascript  gt       var params     allowScriptAccess   always         var atts     id   myytplayer         swfobject embedSWF  http   www youtube com v OyHoZhLdgYw enablejsapi 1 amp playerapiid ytplayer amp version 3                           ytapiplayer    425    356    8   null  null  params  atts       lt  script gt    To play the youtube with the id   swfobject embedSWF   reference  https   developers google com youtube js api referencemagazine

User · Answer

This works in Chrome but not Firefox 3 6  warning  RickRoll video     lt iframe width  420  height  345  src  http   www youtube com embed oHg5SJYRHA0 autoplay 1  frameborder  0  allowfullscreen gt  lt  iframe gt    The JavaScript API for iframe embeds exists  but is still posted as an experimental feature   UPDATE  The iframe API is now fully supported and  Creating YT Player objects - Example 2  shows how to set  autoplay  in JavaScript

User · Answer

Multiple queries tip for those who don t know  past me and future me   If you re making a single query with the url just  autoplay 1 works as shown by mjhm s answer    lt iframe src  https   www youtube com embed oHg5SJYRHA0 autoplay 1  gt  lt  iframe gt    If you re making multiple queries remember the first one begins with a   while the rest begin with a  amp    Say you want to turn off related videos but enable autoplay     This works   lt iframe src  https   www youtube com embed oHg5SJYRHA0 rel 0 amp autoplay 1  gt  lt  iframe gt    and this works   lt iframe src  https   www youtube com embed oHg5SJYRHA0 autoplay 1 amp rel 0  gt  lt  iframe gt    But these won t work     lt iframe src  https   www youtube com embed oHg5SJYRHA0 rel 0 autoplay 1  gt  lt  iframe gt    lt iframe src  https   www youtube com embed oHg5SJYRHA0 amp autoplay 1 amp rel 0  gt  lt  iframe gt    example comparisons  https   jsfiddle net Hastig p4dpo5y4   more info  Read NextLocal s reply below for more info about using multiple query strings

User · Answer

The flags  or parameters that you can use with IFRAME and OBJECT embeds are documented here  the details about which parameter works with what player are also clearly mentioned   YouTube Embedded Players and Player Parameters  You will notice that autoplay is supported by all players  AS3  AS2 and HTML5

User · Answer

To have the accepted answer by mjhm working on Chrome 66 in May 2018  I added allow autoplay to the iframe and enable js 1 to the query string    lt iframe allow autoplay width  420px  height  345px  src  http   www youtube com embed oHg5SJYRHA0 autoplay 1 amp enable js 1  gt  lt  iframe gt

User · Answer

August 2018 I didn t find a working example on the iframe implementation  Other questions were related to Chrome only  which gave it away a little   You ll have to mute sound mute 1 in order to autoplay on Chrome  FF and IE seem to be working just fine using autoplay 1 as parameter    lt iframe src    www youtube com embed   YOUTUBE-ID   autoplay 1 amp mute 1  name  youtube embed  allow  autoplay  encrypted-media  allowfullscreen gt  lt  iframe gt

User · Answer

December 2018   Looking for an AUTOPLAY  LOOP  MUTE youtube video for react   Other answers didn t worked   I found a solution with a library  react-youtube  class Video extends Component         onReady event               add mute         event target mute               add autoplay         event target playVideo               render             const opts                 width   100                height   700px               playerVars                       remove video controls                  controls  0                     remove related video                 rel  0                                   return                lt YouTube                 videoId  oHg5SJYRHA0                  opts  opts                     add autoplay                 onReady  this  onReady                     add loop                 onEnd  this  onReady                gt

User · Answer

at the end of the iframe src  add  amp enablejsapi 1 to allow the js API to be used on the video  and then with jquery   jQuery document  ready function              video-selector iframe   0  contentWindow postMessage    event   command   func   playVideo   args                    this should play the video automatically on document ready  note  that you could also use this inside a click function to click on another element to start the video  More importantly  you cannot auto-start videos on a mobile device so users will always have to click on the video-player itself to start the video  Edit  I m actually not 100  sure on document ready the iframe will be ready  because YouTube could still be loading the video  I m actually using this function inside a click function       video-container   on  click   function         video-selector iframe   0  contentWindow postMessage    event   command   func   playVideo   args                   add other code here to swap a custom image  etc

User · Answer

lt iframe width  560  height  315           src  https   www youtube com embed 9IILMHo4RCQ rel 0 amp amp controls 0 amp amp showinfo 0 amp amp autoplay 1           frameborder  0  allowfullscreen gt  lt  iframe gt

[javascript] How to embed an autoplaying YouTube video in an iframe?

Examples related to javascript

Examples related to html

Examples related to iframe

Examples related to youtube

Examples related to youtube-api