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

39

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

This question is tagged with javascript jquery youtube

~ Asked on 2012-01-15 11:45:32

The Best Answer is


73

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.

_x000D_
_x000D_
         _x000D_
    <div id="player"></div>_x000D_
    <script>_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 <iframe> (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_
    </script>
_x000D_
_x000D_
_x000D_

~ Answered on 2012-01-15 12:04:39


4

Try this its working fine

_x000D_
_x000D_
<html><body style='margin:0px;padding:0px;'>_x000D_
        <script type='text/javascript' src='http://www.youtube.com/iframe_api'></script><script type='text/javascript'>_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_
        </script>_x000D_
        <iframe id='playerId' type='text/html' width='1280' height='720'_x000D_
        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'>_x000D_
        </body></html>
_x000D_
_x000D_
_x000D_

~ Answered on 2016-09-12 10:13:49


Most Viewed Questions: