An iframe'd YouTube implementation wrapper.

ytIframe.js

/*! Reference: https://developers.google.com/youtube/iframe_api_reference/ */
/**
 * Based on my original (admittedly) "rush" implementation. I
 * will be refactoring this code in a module, based on use-cases driven by business 
 * reqs once they're more solidified. enableYouTubeAPI is
 * invoked via a Backbone View's render method after page load (used on LPs).
 */
var MyNamespace = {
  MySubModule: {
    enableYouTubeAPI: function() {
      var app = this, formerState,
        $marquee = $("#marquee"),
        $modal = $("#modal-container"),
        ytURL = "//www.youtube.com/embed/",
        ytAPI = "//www.youtube.com/iframe_api/",
        ytData = "//gdata.youtube.com/feeds/api/videos/",
        globalYTIAR = window.onYouTubeIframeAPIReady,
        // Initialize any players on page load ...
        onYouTubeIframeAPIReady = function(event) {},
        // The YT external code calls onYouTubeStateChange ...
        onYouTubeStateChange = function(event) {
          var tagId = 0,
            STATE = event.data,
            player = event.target,
            iframe = player.getIframe(),
            inModal = $.contains($modal[0], iframe),
            $panel = $(iframe).parents('section .panel');
          $.extend( player, $(iframe).data("tagdata") );
          player.isHero = !inModal;
          player.state = STATE;
          switch (STATE) {
            case YT.PlayerState.ENDED:
              // Continues to PAUSED.
              tagId = inModal? 57.16 : 57.14;
              app.fireVideoAnalytics.call(iframe,tagId,$panel);
            case YT.PlayerState.PAUSED:
              app.isVideoPlaying = false;
              app.fireMediaAnalytics(player);
              break;
            case YT.PlayerState.PLAYING:
              // Continues to BUFFERING.
              if (YT.PlayerState.PAUSED !== formerState) {
                player.state = 10;
                tagId = inModal? 57.15 : 57.11;
                app.fireMediaAnalytics(player);
                app.fireVideoAnalytics.call(iframe,tagId,$panel);
              }
              player.state = YT.PlayerState.PLAYING;
              app.fireMediaAnalytics(player);
            case YT.PlayerState.BUFFERING:
              allVideo("pauseVideo",player);
              app.isVideoPlaying = true;
              break;
          }
          formerState = STATE;
        },
        onVideoReady = function(){
          // Formerly retrieved video info via ytData URL.
        },
        createIframe = function(attributes){
          var attrs = (attributes||{}), defaults = {
            qs: "?wmode=transparent&rel=0&"+(attrs.qs||''),
            frameborder: '0', allowfullscreen: "true"
          };
          attrs.src = ytURL + attrs.id + defaults.qs;
          var $iframe = $("<iframe/>").attr(
            $.extend(defaults, attrs)
          ).addClass("yt");
          return $iframe;
        },
        allVideo = function(ytMethod, ytIgnored){
          if (typeof ytMethod === "object") ytMethod = "pauseVideo";
          $.each(YT.RIT.players,function(){
            if (this !== ytIgnored && this[ytMethod]) this[ytMethod]();
          });
        };
      $.getScript(ytAPI,function(){
        $.extend(YT, {
          RIT: {
            players: (YT && YT.RIT && YT.RIT.players)||{},
            createIframe: createIframe,
            events: {
              onStateChange: onYouTubeStateChange,
              onReady: onVideoReady
            }
          }
        });
        if (globalYTIAR) globalYTIAR(event);
        app.renderMarqueeVideo();
      });
      // Pause all video playback when the user changes panels.
      $marquee.on("click", "ul.page-indicator,.page-turner", allVideo);
      this.panel.on("play", function(){
        // Pause auto-carousel if video is playing.
        if (app.isVideoPlaying) app.panel.pause();
      });
    }
  }
};

// There are several ways to introduce markup for an iframe'd 
// YouTube video player. However, earlier I introduced one in JS.
// The following is a JS implementation example for building a player:
renderMarqueeVideo: function() {
	var $el = $('.yt-container');
	$el.each(function(index, item){
		var ytid = $(item).data('ytid');
		YT.RIT.createIframe({
			id: ytid, width: 647, height: 365
		}).appendTo($(item))
    .show().load(function(){
		  YT.RIT.players[ytid] = new YT.Player(ytid, {
			  events: YT.RIT.events
		  });
		});
	});
}