title: Mute YouTube video and autoplay
body: <p>I've got this somewhat working, I'm trying to get the YouTube video on the page to start automatically and be muted on the page load, this is my HTML: </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="col-sm-8 product-video-section" id="player"&gt;
      &lt;iframe id="ytplayer" width="560" height="315" src="https://www.youtube.com/embed/tMnpYFl6-k8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen wmode="Opaque"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS: (I found this on google)</p>
  
  <pre class="lang-html prettyprint-override"><code>&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: '195',
                  width: '260',
                  videoId: 'h3P1OR9gg2Y',
                  events: {
                      'onReady': onPlayerReady,
                      'onStateChange': onPlayerStateChange
                  }
              });
          }
  
          // 4. The API will call this function when the video player is ready.
          function onPlayerReady(event) {
              event.target.setVolume(0);
              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;
              }
              event.target.setVolume(0);
          }
      &lt;/script&gt;
  </code></pre>
  
  <p>This almost works the way I want it to, the issue is that it's setting the videoID and building the iframe in the JS - I don't want this, I have multiple pages with different videos using this template so I need the ability to have the iframe in the content. Is there a way to do it without setting the id there? </p>