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...

Answer 1

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>

Answer 2

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>