root / cloudcms / static / cloudcms / js / youtube.js @ 8039f922
History | View | Annotate | Download (1.8 kB)
| 1 |
function YouTube(options) { |
|---|---|
| 2 |
this.options = options;
|
| 3 |
this.wrapper = options.wrapper;
|
| 4 |
this.alink = 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: '100%', |
| 14 |
width: '100%', |
| 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 |
|
| 26 |
$(window).resize(_.bind(function() { |
| 27 |
if (this.close.css('visibility') == 'hidden' ) { |
| 28 |
this.wrapper.css('height', '282px' ); |
| 29 |
} else {
|
| 30 |
this.currwidth = this.wrapper.width(); |
| 31 |
this.currheight = parseInt(458* (this.currwidth/816)); |
| 32 |
this.wrapper.css('height',this.currheight) |
| 33 |
} |
| 34 |
}, this));
|
| 35 |
this.initEvents();
|
| 36 |
} |
| 37 |
|
| 38 |
|
| 39 |
YouTube.prototype.initEvents = function() { |
| 40 |
var self = this; |
| 41 |
this.alink.click(function(e){ |
| 42 |
e.preventDefault(); |
| 43 |
self.image.fadeOut({duration:2500,easing:'easeOutCirc'});
|
| 44 |
self.wrapper.animate({
|
| 45 |
height: self.currheight
|
| 46 |
},1000, function(){ |
| 47 |
self.close.css('visibility','visible'); |
| 48 |
self.alink.hide(); |
| 49 |
if (!(isIpadIphone())) {
|
| 50 |
self.player.playVideo(); |
| 51 |
} |
| 52 |
}) |
| 53 |
}); |
| 54 |
this.close.click(function(e){ |
| 55 |
e.preventDefault(); |
| 56 |
self.endEvents(); |
| 57 |
}) |
| 58 |
} |
| 59 |
|
| 60 |
YouTube.prototype.endEvents = function() { |
| 61 |
var self = this; |
| 62 |
self.player.pauseVideo(); |
| 63 |
self.close.css('visibility','hidden'); |
| 64 |
self.image.fadeIn({duration:1500,easing:'easeOutCirc'});
|
| 65 |
self.wrapper.animate({
|
| 66 |
height:'282' |
| 67 |
},1000, function(){ |
| 68 |
self.alink.show(); |
| 69 |
}) |
| 70 |
} |