tracking embed video events with Youtube API - ytcfg is not defined(…)

Question

I found this tutorial on how to track GA events of embed youtube videos and did my script by it:

(function ($) {
  $(document).ready(function () {

    var tag = document.createElement('script');
    tag.src = "http://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  });

  // This code is called by the YouTube API to create the player object
  function onYouTubeIframeAPIReady(event) {
    player = new YT.Player('player', {
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  var done = false;

  function onPlayerStateChange(event) {

    // track when user clicks to Play
    if (event.data == YT.PlayerState.PLAYING && done===false) {
      ga('send', 'event', 'Video', 'Prehratie videa', 'GE', 1);
      done = true;
    }
  }

}(jQuery));

The script is added at every page in theme_preprocess_page(). However, I'm getting an error:

Uncaught ReferenceError: ytcfg is not defined(…)

Here you can read it is an error at youtube's side. It is true that everything is ok in my script and is there something I could do in order to get it to work?

Answer 1

Well, it is a bug on the YouTube part and there is now an existing bug ticket for this. You can always check this bug ticket for an update on this issue.

For the workaround, I found in this YouTube Help Forum to use objects instead of iframes. You can try this temporary solution if it works in your case. Hope it helps you.