title: Youtube iFrame API in ES6 / modules
body: <p>I'm trying to load a YT video via the api. This official tutorial snippet works basically out of the box when I output it directly onto a page. It's a different story when I try and incorporate it into my JS workflow with modules / webpack.  </p>
  
  <p><strong>Questions</strong>: </p>
  
  <p>How do I make these methods (play / mute / setLoop / stop / etc) available globally? </p>
  
  <p>How do I create the script tag first and then run the onYouTubeIframeAPIReady function? </p>
  
  <p>Thanks all. Hope this isn't a completely useless question!</p>
  
  <pre><code>&lt;script&gt;
                // 1. Load up the script tag
                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. Creates an &lt;iframe&gt; (and YouTube player) after the API code downloads.
                var player;
                function onYouTubeIframeAPIReady() {
                  player = new YT.Player('a-spot-video-background', {
                      width: '1280',
                      height: '720',
                      videoId: 'T8v-gQeQZJY',
                      playerVars: {
                          autoplay: 1,
                          controls: 0,
                          modestbranding: 1,
                          rel: 0,
                          showinfo: 0,
                          loop: 1,
                          disablekb: 1,
                          color: 'white'
                      },
                      events: {
                          'onReady': onPlayerReady,
                          'onStateChange': onPlayerStateChange
                      }
                  });
                }
  
                // 3. The API will call this function when the video player is ready.
                function onPlayerReady(event) {
                  event.target.mute();
                  event.target.playVideo();
                  event.target.setLoop();
                }
  
                // 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, 10000);
                      player.playVideo();
                      done = true;
                    }
                }
                function stopVideo() {
                  player.stopVideo();
                }
            &lt;/script&gt;
  </code></pre>