YT API Example

gistfile1.js

(function ($, Drupal, window, document, undefined) {
  var
    videoid = Drupal.settings.cc_ws_video_overlay.videoid,
    iframe = "yt-iframe",
    YT;

  YT = {
    ratio: .5625,
    data: [],
    players: [],
    iframes: [],

    init: function() {
      this.loadYouTube();
      this.pagePrep();
    },

    appendVideo: function() {
      var embedVideo = _.bind(this.embedVideo, this);
      embedVideo(this.index, this.data);
    },

    embedVideo: function(index, data) {
      var player,
        elementID,
        width,
        height,
        options,
        getVideo,
        endVideo;

      getVideo  = _.bind(this.getVideo, this);
      endVideo  = _.bind(this.endVideo, this);

      width = "100%";
      height = "100%";

      options = {
        autoplay: 1,
        autohide: 0,
        controls: 0,
        modestbranding: 1,
        hd: 1,
        rel: 0,
        showInfo: 0,
        wmode: 'opaque',
        origin: '//' + document.domain + '/',
        enablejsapi: 1
      }

      player = new YT.Player(iframe, {
        videoId: videoid,
        width: width,
        height: height,
        playerVars: options,
        events: {
          'onReady': function() {
            getVideo();
          },
          'onStateChange': function(event) {
            if (event.data == YT.PlayerState.ENDED){
              endVideo();
            }
          }
        }
      });

      this.players.push(player);
    },

    checkMobile: function() {
      // if you need agent detection
      $.mobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
      return ($.mobile);
    },

    endVideo: function() {
      // do stuff after the video
    },

    getVideo: function() {
      var $iframe;

      $iframe = $("#yt-iframe");
      this.iframes.push($iframe);
    },

    loadYouTube: function() {
      var tag,
        firstScriptTag;

      tag = document.createElement('script');

      tag.src = "//youtube.com/iframe_api";
      firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    },

    pagePrep: function() {
      if (!this.checkMobile()) {
        // You can remove this if you need it for mobile too
        this.getVideo();
      }
    }

  }

  // Utils
  function checkElem(el) {
    return ($(el).length > 0);
  }

  $(document).ready(function() {
    YT.init();
    window.onYouTubeIframeAPIReady = function() {
      YT.appendVideo();
  });

})(jQuery, Drupal, this, this.document);