title: how do i program the youtube embed player to unmute when clicked
body: <p>How do I set the youtube embedded player to unmute upon clicking it. You can see the embedded player i'm referring to at <a href="http://www.harvestarmy.org" rel="noreferrer">http://www.harvestarmy.org</a> home page. It's the one at the right where it says "Latest Videos from YouTube. I set it up to be muted by default, but I want it to automatically unmute when someone clicks it.</p>
  
  <p>Here is the code I used:</p>
  
  <pre><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');
  
    // This is a protocol-relative URL as described here:
    //     http://paulirish.com/2010/the-protocol-relative-url/
    // If you're testing a local page accessed via a file:/// URL, please set tag.src to
    //     "https://www.youtube.com/iframe_api" instead.
    tag.src = "//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: '98',
        width: '175',
        playerVars: {
          'list': 'UUFwY5Al1Doy7f0MdKnJ-gaw',
          'modestbranding': 1,
          'showinfo': 0,
          'autoplay': 1
        },
        events: {
          'onReady': onPlayerReady
        }
      });
    }
  
    // 4. The API will call this function when the video player is ready.
    function onPlayerReady(event) {
      event.target.mute();
    }
  
  &lt;/script&gt;
  </code></pre>