code.grnet.gr Git - snf-cloudcms/blob - cloudcms/static/cloudcms/js/youtube.js

   1 function  YouTube(options) {
   2   this.options = options;
   3   this.wrapper = options.wrapper;
   4   this.link = this.wrapper.find('a');
   5   this.image = this.wrapper.find('img');
   6   this.videoEl = this.wrapper.find('.player-placeholder');
   7   this.currwidth = this.wrapper.width();
   8   this.currheight = parseInt(458* (this.currwidth/816));
   9   this.close = $('#stop-youtube');
  10   var self = this;
  11
  12   this.player =  new YT.Player(this.videoEl[0], {
  13     height: self.currheight,
  14     width: self.currwidth,
  15     playerVars: { 'modestbranding':1},
  16     videoId: options.youtube_id,
  17     events: {
  18       'onStateChange': function(event) {
  19         if ( event.data == YT.PlayerState.ENDED ) {
  20           self.endEvents();
  21         }
  22       }
  23     },
  24   })
  25   console.log(this.player);
  26  // this.player.setPlaybackQuality('hd1080');
  27
  28   this.initEvents();
  29
  30 }
  31
  32
  33 YouTube.prototype.initEvents = function() {
  34   var self = this;
  35   this.link.click(function(e){
  36       e.preventDefault();
  37       self.image.fadeOut({duration:2500,easing:'easeOutCirc'});
  38       $(self.player.a).hide().fadeIn({duration:3500,easing:'easeOutCirc'});
  39       self.wrapper.animate({
  40         height: self.currheight
  41       },1000, function(){
  42         self.close.css('visibility','visible');
  43         self.link.hide();
  44         self.player.setPlaybackQuality('hd720');
  45         self.player.playVideo();
  46       })
  47   });
  48   this.close.click(function(e){
  49     e.preventDefault();
  50     self.endEvents();
  51   })
  52 }
  53
  54 YouTube.prototype.endEvents = function() {
  55   var self = this;
  56   self.close.css('visibility','hidden');
  57   self.image.fadeIn({duration:1500,easing:'easeOutCirc'});
  58   $(self.player.a).show().fadeIn({duration:1500,easing:'easeOutCirc'});
  59   self.wrapper.animate({
  60     height:'282'
  61   },1000, function(){
  62     self.link.show();
  63   })
  64 }