title: Load youtube player api asynchronously on jquery event
body: <p>I need to load the youtube iframe player with api on a jquery change event but it only shows how to load it when the script is loaded.</p>
  
  <p>This is the script they use to load the player with the api.</p>
  
  <pre><code>  var tag = document.createElement('script');
    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: '390',
        width: '640',
        videoId: 'u1zgFlCw8Aw',
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
    }
  </code></pre>
  
  <p>I need to wait to fire this until my change event is fired so inside this..</p>
  
  <pre><code> $(document).on("change","#yt-url", function() {
       youtubeUrl = $(this).val();
       youtubeId = youtube_parser(youtubeUrl);
       // Load the youtube player with api
   });
  </code></pre>
  
  <p>What's the correct way to do this?</p>