root / cloudcms / static / cloudcms / js / youtube.js @ 3e750004
History | View | Annotate | Download (2 kB)
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: '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 |
|
35 |
}, this));
|
36 |
|
37 |
this.initEvents();
|
38 |
|
39 |
} |
40 |
|
41 |
|
42 |
YouTube.prototype.initEvents = function() { |
43 |
var self = this; |
44 |
this.link.click(function(e){ |
45 |
e.preventDefault(); |
46 |
self.image.fadeOut({duration:2500,easing:'easeOutCirc'}); |
47 |
$(self.player.a).hide().fadeIn({duration:3500,easing:'easeOutCirc'}); |
48 |
self.wrapper.animate({ |
49 |
height: self.currheight
|
50 |
},1000, function(){ |
51 |
self.close.css('visibility','visible'); |
52 |
self.link.hide(); |
53 |
self.player.setPlaybackQuality('hd720');
|
54 |
self.player.playVideo(); |
55 |
}) |
56 |
}); |
57 |
this.close.click(function(e){ |
58 |
e.preventDefault(); |
59 |
self.player.stopVideo(); |
60 |
self.endEvents(); |
61 |
}) |
62 |
} |
63 |
|
64 |
YouTube.prototype.endEvents = function() { |
65 |
var self = this; |
66 |
self.close.css('visibility','hidden'); |
67 |
self.image.fadeIn({duration:1500,easing:'easeOutCirc'}); |
68 |
$(self.player.a).show().fadeIn({duration:1500,easing:'easeOutCirc'}); |
69 |
self.wrapper.animate({ |
70 |
height:'282' |
71 |
},1000, function(){ |
72 |
self.link.show(); |
73 |
}) |
74 |
} |