Example YouTube Video integration

YouTubeVideo.js

(function(window) {


  var WizardYouTubeVideo = function(configuration) {
    var config = configuration || {};

    this.name = "WizardYouTubeVideo";
    this.id = config.id || this.name;
    this.width = config.width || "280px";
    this.height = config.height || "180px";
    this.x = config.x || "20px";
    this.y = config.y || "200px";
    this.src = config.src || "";
  };


  var p = WizardYouTubeVideo.prototype = new ConfigurableControl();


  p.setupYouTubeAPI = function() {

    if (!this.youTubeAPI) {
      this.youTubeAPI = $.getScript("http://www.youtube.com/iframe_api");
    }

    var that = this;

    window.onYouTubeIframeAPIReady = function() {
      p.onYouTubeIframeAPIReady(that);
    };
  };


  p.onYouTubeIframeAPIReady = function(obj) {
    window.debugPlayer = this.ytPlayer = new YT.Player('player', {
      height: obj.height,
      width: obj.width,
      videoId: p.getYouTubeID(obj.src),
      events: {
        'onReady': p.onPlayerReady,
        'onStateChange': p.onPlayerStateChange
      }
    });
  };


  p.onPlayerReady = function(event) {
    //
  };


  p.onPlayerStateChange = function(event) {
    if (event.data == YT.PlayerState.PLAYING) {
      if (typeof SV != undefined) {
        SV.api.trackInteraction('multimedia', 'video_started', this.src);
      }
    } else if (event.data == YT.PlayerState.ENDED) {
      if (typeof SV != undefined) {
        SV.api.trackInteraction('multimedia', 'video_completed', this.src);
        SV.engagement.showNextStep();
      }
    }
  };


  p.getYouTubeID = function(src_url) {
      if (!src_url) {
        return '';
      }

      var youtubeID;

      if (src_url.indexOf('watch') != -1) {
        youtubeID = src_url.split('v=')[1];
        var ampersandPosition = youtubeID.indexOf('&');
        if(ampersandPosition != -1) {
          youtubeID = youtubeID.substring(0, ampersandPosition);
        }
      } else if (src_url.indexOf('embed') != -1) {
        youtubeID = src_url.substring(src_url.lastIndexOf('/')+1);
      } else if (src_url.indexOf('youtu.be') != -1) {
        var regex2 = new RegExp("youtu\.be\/([^&\/]+)", "gim");
        var regexResult2 = src_url.match(regex2);
        youtubeID = regexResult2.split("/")[1];
      } else {
        youtubeID = src_url;
      }

      return youtubeID;
  };


  p.build = function() {
    this.div = $('<div id="' + this.id + '" class="manipulatable"/>');
    this.bb = $('<div class="bb"/>');
    this.mask = $('<div class="wizard-mask"/>');
    this.embed = $('<div id="player" class="wizard-iframe resize"/>');
    
    this.bb.append(this.mask, this.embed);
    this.div.append(this.bb);
  };


  p.renderTo = function(element) {
    this.build();

    element.prepend(this.div);

    this.setupYouTubeAPI();

    this.update();
  };


  p.update = function() {
    this.div.attr('id', this.id);
    this.div.width(this.width);
    this.div.height(this.height);
    this.div.css('left', this.x);
    this.div.css('top', this.y);

    if (this.ytPlayer && this.src) {
      this.ytPlayer.loadVideoById(this.getYouTubeID(this.src));
    }
  };


  p.getConfig = function() {
    var config = {
      "id": this.id,
      "name": this.name,
      "width": this.width,
      "height": this.height,
      "x": this.x,
      "y": this.y,
      "src": this.src
    };

    return config;
  };


  p.setConfig = function(config) {
    for (var i in config) {
      switch (i) {
        case 'id':
          this.id = config[i];
          break;
        case 'width':
          this.width = config[i];
          break;
        case 'height':
          this.height = config[i];
          break;
        case 'x':
          this.x = config[i];
          break;
        case 'y':
          this.y = config[i];
          break;
        case 'src':
          this.src = config[i];
          break;
      }
    }
  };


  window.WizardYouTubeVideo = WizardYouTubeVideo;


}(window));