Youtube autoplay not working on mobile devices with embedded HTML5 player

Question

To my problem  i have one link  lt a href  http   www youtube com embed YT-ID  class  overlay video  gt  lt  a gt   I want to play the video by clicking the link in a fancybox overlay window  This is not a problem  The problem is the parameters  for example  autoplay  or  autohide    The following link don t work    lt a href  http   www youtube com embed YT-ID autoplay 1  class  overlay video  gt  lt  a gt    The Overlay-Window opened  but the video is not playing automatically   EDIT  I want to use the HTML5 Player on mobile devices  On a desktop-browser it works with the parameters  but not on mobile devices

User · Accepted Answer

As it turns out  autoplay cannot be done on iOS devices  iPhone  iPad  iPod touch  and  Android   See https   stackoverflow com a 8142187 2054512 and https   stackoverflow com a 3056220 2054512

User · Answer

The official statement  quot Due to this restriction  functions and parameters such as autoplay  playVideo    loadVideoById   won t work in all mobile environments  Reference  https   developers google com youtube iframe api reference

User · Answer

The code below was tested on iPhone  iPad  iOS13   Safari  Catalina   It was able to autoplay the YouTube video on all devices  Make sure the video is muted and the playsinline parameter is on  Those are the magic parameters that make it work    lt  DOCTYPE html gt   lt html gt       lt head gt           lt meta name  viewport  content  width device-width  initial-scale 1 0  maximum-scale 2 0  minimum-scale 1 0  user-scalable yes  gt       lt  head gt     lt body gt   lt  -- 1  The  lt iframe gt   video player  will replace this  lt div gt  tag  -- gt   lt div id  player  gt  lt  div gt    lt script gt       2  This code loads the IFrame Player API code asynchronously    var tag   document createElement  script       tag src    https   www youtube com iframe api     var firstScriptTag   document getElementsByTagName  script   0     firstScriptTag parentNode insertBefore tag  firstScriptTag         3  This function creates an  lt iframe gt   and YouTube player          after the API code downloads    var player    function onYouTubeIframeAPIReady         player   new YT Player  player           width   100          videoId   osz5tVY97dQ         playerVars     autoplay   1   playsinline   1          events             onReady   onPlayerReady                           4  The API will call this function when the video player is ready    function onPlayerReady event         event target mute        event target playVideo         lt  script gt     lt  body gt   lt  html gt

User · Answer

Have a look on code below  Tested and found working on Mobile and Tablet devices    lt  -- 1  The  lt iframe gt   video player  will replace this  lt div gt  tag  -- gt   lt div id  player  gt  lt  div gt    lt script gt       2  This code loads the IFrame Player API code asynchronously    var tag   document createElement  script       tag src    https   www youtube com iframe api     var firstScriptTag   document getElementsByTagName  script   0     firstScriptTag parentNode insertBefore tag  firstScriptTag         3  This function creates an  lt iframe gt   and YouTube player          after the API code downloads    var player    function onYouTubeIframeAPIReady         player   new YT Player  player           height   390         width   640         videoId   M7lc1UVf-VE         events             onReady   onPlayerReady           onStateChange   onPlayerStateChange                           4  The API will call this function when the video player is ready    function onPlayerReady event        event target playVideo              5  The API calls this function when the player s state changes          The function indicates that when playing a video  state 1           the player should play for six seconds and then stop    var done   false    function onPlayerStateChange event        if  event data    YT PlayerState PLAYING  amp  amp   done          setTimeout stopVideo  6000         done   true              function stopVideo         player stopVideo         lt  script gt

User · Answer

There is a way to make youtube autoplay  and complete playlists play through  Get Adblock browser for Android  and then go to the youtube website  and and configure it for the desktop version of the page  close Adblock browser out  and then reopen  and you will have the desktop version  where autoplay will work   Using the desktop version will also mean that AdBlock will work  The mobile version invokes the standalone YouTube player  which is why you want the desktop version of the page  so that autoplay will work  and so ad blocking will work

[html] Youtube autoplay not working on mobile devices with embedded HTML5 player

Examples related to html

Examples related to mobile

Examples related to youtube

Examples related to fancybox

Examples related to overlay