How do I automatically play a Youtube video IFrame API muted

Question

lt iframe class  youtube-player  type  text html  src  http   www youtube com embed JW5meKfy3fY wmode opaque amp autohide 1 amp autoplay 1 amp volume 0 amp vol 0 amp mute 1  frameborder  0  gt  amp lt br   amp gt  lt  iframe gt    The video isn t muted  I want volume to be 0 when it first plays

User · Answer

x000D   x000D  var video1  x000D   x000D  function onYouTubeIframeAPIReady    x000D   player   new YT Player  video1     x000D    videoId   id-number   x000D    width  300  x000D    height  200   x000D    playerVars    x000D      autoplay   1     and 0 means off x000D      controls   1  x000D      showinfo   0  x000D      modestbranding   0  x000D      loop   1  x000D      fs   0  x000D      cc load policy   0  x000D      iv load policy   3  x000D        x000D    events    x000D         onReady   onPlayerReady x000D      x000D       x000D      x000D   x000D  function onPlayerReady event    x000D      event target mute    x000D      event target setVolume 0     this can be set from 0 to 100 x000D    x000D   x000D   x000D    Remember that the sound will not be muted in IE and Safari

User · Answer

Try this its working fine   x000D   x000D   lt html gt  lt body style  margin 0px padding 0px   gt  x000D           lt script type  text javascript  src  http   www youtube com iframe api  gt  lt  script gt  lt script type  text javascript  gt  x000D                  var player  x000D          function onYouTubeIframeAPIReady   x000D           player new YT Player  playerId   events  onReady onPlayerReady     x000D          function onPlayerReady event  player mute   player setVolume 0  player playVideo     x000D           lt  script gt  x000D           lt iframe id  playerId  type  text html  width  1280  height  720  x000D          src  https   www youtube com embed R52bof3tvZs enablejsapi 1 amp rel 0 amp playsinline 1 amp autoplay 1 amp showinfo 0 amp autohide 1 amp controls 0 amp modestbranding 1  frameborder  0  gt  x000D           lt  body gt  lt  html gt  x000D   x000D   x000D

User · Answer

The accepted answer works pretty good  I wanted more control so I added a couple of functions more to the script   function unmuteVideo         player unMute        return false        function muteVideo         player mute        return false        function setVolumeVideo volume        player setVolume volume       return false        And here is the HTML    lt br gt   lt button type  button  onclick  unmuteVideo     gt Unmute Video lt  button gt   lt button type  button  onclick  muteVideo     gt Mute Video lt  button gt   lt br gt   lt br gt   lt button type  button  onclick  setVolumeVideo 100    gt Volume 100  lt  button gt   lt button type  button  onclick  setVolumeVideo 75    gt Volume 75  lt  button gt   lt button type  button  onclick  setVolumeVideo 50    gt Volume 50  lt  button gt   lt button type  button  onclick  setVolumeVideo 25    gt Volume 25  lt  button gt    Now you have more control of the sound    Check the reference URL for more   YouTube IFrame Player API

User · Answer

The player api will be deprecated on Jun 25  2015  For play youtube videos there is a new api IFRAME API  It looks like the following code    lt  -- 1  The  lt iframe gt   and 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

Update 2021 to loop and autoplay video on desktop mobile devices  tested on iPhone X - Safari   I am using the onPlayerStateChange event and if the video end  I play the video again  Refference to onPlayerStateChange event in YouTube API   x000D   x000D   lt div id  player  gt  lt  div gt   lt script gt    var tag   document createElement  script       tag src    https   www youtube com iframe api     var firstScriptTag   document getElementsByTagName  script   0     firstScriptTag parentNode insertBefore tag  firstScriptTag      var player     function onYouTubeIframeAPIReady         player   new YT Player  player           height   100          width   100          playerVars            autoplay  1          loop  1          controls  0          showinfo  0          autohide  1          playsinline  1          mute  1          modestbranding  1          vq   hd1080                 videoId   ScMzIvxBSi4         events             onReady   onPlayerReady           onStateChange   onPlayerStateChange                        function onPlayerReady event        event target mute         setTimeout function           event target playVideo           0          function onPlayerStateChange event        if  event target getPlayerState      0          setTimeout function             event target playVideo             0              lt  script gt  x000D   x000D   x000D

User · Answer

Youtube don t provide muting through url parameter  see http   code google com apis youtube player parameters html    You have to use javascript for that  see http   code google com apis youtube js api reference html for details   However  please note the warning on the page linked above   The deprecation of the YouTube JavaScript Player API was announced on January 27  2015  YouTube Flash  embeds have also been deprecated  See the deprecation policy for more information  Please migrate your applications to the IFrame API  which can intelligently use whichever embedded player     HTML    or Flash        the client supports    Html   lt iframe class  youtube-player  id  player  type  text html  src  http   www youtube com embed JW5meKfy3fY wmode opaque amp autohide 1 amp autoplay 1 amp enablejsapi 1  frameborder  0  gt  amp lt br   amp gt  lt  iframe gt    please note enablejsapi 1 in the url   Javascript  var player    iframe getElementById  player    player mute      Update  Previous code had some issues and did not work with current API  playerVars syntax was wrong   Here is the updated code  You may need to tinker with the parameters you need    x000D   x000D            x000D       lt div id  player  gt  lt  div gt  x000D       lt script gt  x000D           1  This code loads the IFrame Player API code asynchronously  x000D        var tag   document createElement  script    x000D   x000D        tag src    https   www youtube com iframe api   x000D        var firstScriptTag   document getElementsByTagName  script   0   x000D        firstScriptTag parentNode insertBefore tag  firstScriptTag   x000D   x000D           2  This function creates an  lt iframe gt   and YouTube player  x000D              after the API code downloads  x000D        var player  x000D        function onYouTubeIframeAPIReady     x000D          player   new YT Player  player     x000D            height   100    x000D            width   100    x000D            playerVars    x000D                      autoplay  1  x000D                      loop  1  x000D                      controls  0  x000D                      showinfo  0  x000D                      autohide  1  x000D                      modestbranding  1  x000D                      vq   hd1080    x000D            videoId   1pzWROvY7gY   x000D            events    x000D               onReady   onPlayerReady  x000D               onStateChange   onPlayerStateChange x000D              x000D              x000D          x000D   x000D           3  The API will call this function when the video player is ready  x000D        function onPlayerReady event    x000D          event target playVideo    x000D          player mute    x000D          x000D   x000D        var done   false  x000D        function onPlayerStateChange event    x000D           x000D          x000D        function stopVideo     x000D          player stopVideo    x000D          x000D       lt  script gt  x000D   x000D   x000D

User · Answer

You can select the video player and then set its volume   var mp   iframe getElementById  movie player    mp setVolume 0     Source  http   userscripts org scripts review 49366

[javascript] How do I automatically play a Youtube video (IFrame API) muted?

Examples related to javascript

Examples related to jquery

Examples related to youtube