title: Youtube API and tracking embedded video
body: <p>The issue at hand is the embedding of multiple Youtube videos on a page and now the Youtube Analytics is not working. Previously I had many embedded videos on a Drupal page, but the site was not SEO friendly with the speed of the page being slow with many embedded Youtube videos making many calls back to Youtube site with js and css.</p>
  
  <p>I found some good articles about speeding up the site by replacing the Youtube player with a placeholder image and when the user wishes to watch. I found the js code here (<a href="http://www.labnol.org/internet/light-youtube-embeds/27941/" rel="nofollow">http://www.labnol.org/internet/light-youtube-embeds/27941/</a> and <a href="http://schoberg.net/2015/08/fast-agile-youtube-embed-responsive-iframe-load-delay-with-jquery/" rel="nofollow">http://schoberg.net/2015/08/fast-agile-youtube-embed-responsive-iframe-load-delay-with-jquery/</a>) With those "hacks" the website loads much faster and quicker and SEO score is higher.</p>
  
  <p>Enter another problem. Now the Youtube analytics is not tracking the Youtube videos on the site anymore. I dont know why, the video still gets clicked on, and the embedded video does get played on the site. </p>
  
  <p>What should I do with the embed code to make it track the Youtube video again?</p>
  
  <p>How can I track it with Google Analytics if I cant track with Youtube Analytics anymore?</p>
  
  <p>I need some StackOverflow magic...</p>
  
  <p>The code to embed Youtube video on the page is:</p>
  
  <pre><code>&lt;div class="youtube" id="_ynxddD0Eqk"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and the function code on the backend:</p>
  
  <pre><code>    &lt;script&gt;
  $(document).ready(function() {
    $(".youtube").each(function() {
      // Set the BG image from the youtube ID
      $(this).css('background-image', 'url(//i.ytimg.com/vi/' + this.id + '/hqdefault.jpg)');
      // Click the video div
      $(document).delegate('#' + this.id, 'click', function() {
        // Build embed URL
        var iframe_url = "//www.youtube.com/embed/" + this.id + "?autoplay=1&amp;autohide=2&amp;wmode=opaque&amp;enablejsapi=1";
        // Grab extra parameters set on div
        if ($(this).data('params')) iframe_url += '&amp;' + $(this).data('params');
        // Build iframe tag
        var iframe = $('&lt;iframe/&gt;', {'allowfullscreen':'allowfullscreen', 'frameborder': '0', 'src': iframe_url});
        // /youtube event tracking
        $(iframe).addClass("media-youtube-player");
        // Replace the YouTube thumbnail with YouTube HTML5 Player
        $(this).replaceWith(iframe);
      });// /click
    }); // /each video
  }); // /document ready
   &lt;/script&gt;
  </code></pre>