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

Question

<iframe class="youtube-player" type="text/html" src="http://www.youtube.com/embed/JW5meKfy3fY?wmode=opaque&autohide=1&autoplay=1&volume=0&vol=0&mute=1" frameborder="0">&lt;br /&gt;</iframe>

The video isn't muted! I want volume to be 0 when it first plays...

Gagandeep Singh · Accepted Answer · 2017-02-15T07:29:15.160

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

<iframe class="youtube-player" id="player" type="text/html" src="http://www.youtube.com/embed/JW5meKfy3fY?wmode=opaque&autohide=1&autoplay=1&enablejsapi=1" frameborder="0">&lt;br /&gt;</iframe>

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.

         
    <div id="player"></div>
    <script>
      // 1. 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);

      // 2. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '100%',
          width: '100%',
          playerVars: {
                    autoplay: 1,
                    loop: 1,
                    controls: 0,
                    showinfo: 0,
                    autohide: 1,
                    modestbranding: 1,
                    vq: 'hd1080'},
          videoId: '1pzWROvY7gY',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 3. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
        player.mute();
      }

      var done = false;
      function onPlayerStateChange(event) {
        
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>

It work, thanks! but what about IE7, IE8? it dose not work for this browser. there is any thing that we can do? — lolo, Jul 25 '12 at 11:01
If the loop parameter isn't behaving for you - add a 'playlist: videoId' parameter. http://stackoverflow.com/a/13047331/901311 — sirclesam, Oct 06 '16 at 05:54
All this to mute the video, oversights made? But this solution works as of 11 Nov 2016. — john, Nov 11 '16 at 12:49
@GagandeepSingh Please update your solution above with the working code. — Markus Bucher, Feb 14 '17 at 12:08
@MarkusBucher code is working just fine, I checked it right now. You might need to remove first comment as it is commented as js comment but in html. — Gagandeep Singh, Feb 15 '17 at 07:27

score 4 · Answer 2 · answered Jun 08 '15 at 17:31

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:

<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>

<script>
  // 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 <iframe> (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 && !done) {
      setTimeout(stopVideo, 6000);
      done = true;
    }
  }
  function stopVideo() {
    player.stopVideo();
  }
</script>

score 4 · Answer 3 · answered Sep 12 '16 at 10:13

Try this its working fine

<html><body style='margin:0px;padding:0px;'>
        <script type='text/javascript' src='http://www.youtube.com/iframe_api'></script><script type='text/javascript'>
                var player;
        function onYouTubeIframeAPIReady()
        {player=new YT.Player('playerId',{events:{onReady:onPlayerReady}})}
        function onPlayerReady(event){player.mute();player.setVolume(0);player.playVideo();}
        </script>
        <iframe id='playerId' type='text/html' width='1280' height='720'
        src='https://www.youtube.com/embed/R52bof3tvZs?enablejsapi=1&rel=0&playsinline=1&autoplay=1&showinfo=0&autohide=1&controls=0&modestbranding=1' frameborder='0'>
        </body></html>

Rado · Answer 4 · 2021-01-27T09:47:24.537

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.

<div id="player"></div>
<script>
  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);
    }
  }
</script>

score 3 · Answer 5 · answered Jan 15 '12 at 11:53

3

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

answered Jan 15 '12 at 11:53

ldiqual

15,015
6
52
90

Mute is better, with it you can unmute without changing the original volume. – Jason Goemaat Jun 19 '14 at 19:47
1

trying to fix your fiddle TIMEX and had to stop to listen to the whole song haha... – Robbo Feb 19 '15 at 00:20

score 1 · Answer 6 · answered Aug 23 '16 at 19:46

var video1;

function onYouTubeIframeAPIReady(){
 player = new YT.Player("video1", {
  videoId: "id-number",
  width: 300,
  height: 200, 
  playerVars: {
   "autoplay": 1, // and 0 means off
   "controls": 1,
   "showinfo": 0,
   "modestbranding": 0,
   "loop": 1,
   "fs": 0,
   "cc_load_policy": 0,
   "iv_load_policy": 3,
   },
  events: {
      'onReady': onPlayerReady
  }
 });
  }

function onPlayerReady(event) {
    event.target.mute();
    event.target.setVolume(0); //this can be set from 0 to 100
}

Remember that the sound will not be muted in IE and Safari.

score 0 · Answer 7 · answered Aug 23 '16 at 16:22

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:

<br>
<button type="button" onclick="unmuteVideo();">Unmute Video</button>
<button type="button" onclick="muteVideo();">Mute Video</button>
<br>
<br>
<button type="button" onclick="setVolumeVideo(100);">Volume 100%</button>
<button type="button" onclick="setVolumeVideo(75);">Volume 75%</button>
<button type="button" onclick="setVolumeVideo(50);">Volume 50%</button>
<button type="button" onclick="setVolumeVideo(25);">Volume 25%</button>

Now you have more control of the sound... Check the reference URL for more:

YouTube IFrame Player API

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

7 Answers7

Linked