-
Notifications
You must be signed in to change notification settings - Fork 0
/
jquery.youtubeplaylist.js
113 lines (84 loc) · 3.34 KB
/
jquery.youtubeplaylist.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
//-------------------------------------------------
// youtube playlist jquery plugin
// Created by [email protected]
// www.geckonewmedia.com
//
// v1.1 - updated to allow fullscreen
// - thanks Ashraf for the request
//-------------------------------------------------
jQuery.fn.ytplaylist = function(options) {
// default settings
var options = jQuery.extend( {
holderId: 'ytvideo',
playerHeight: '300',
playerWidth: '450',
addThumbs: false,
thumbSize: 'small',
showInline: false,
autoPlay: true,
showRelated: true,
allowFullScreen: false
},options);
return this.each(function() {
var selector = $(this);
var autoPlay = "";
var showRelated = "&rel=0";
var fullScreen = "";
if(options.autoPlay) autoPlay = "&autoplay=1";
if(options.showRelated) showRelated = "&rel=1";
if(options.allowFullScreen) fullScreen = "&fs=1";
//throw a youtube player in
function play(id)
{
var html = '';
html += '<object height="432" width="720">';
html += '<param name="movie" value="https://www.youtube.com/v/'+id+autoPlay+showRelated+fullScreen+'&hd=1"> </param>';
html += '<param name="wmode" value="transparent"> </param>';
if(options.allowFullScreen) {
html += '<param name="allowfullscreen" value="true"> </param>';
}
html += '<embed src="https://www.youtube.com/v/'+id+autoPlay+showRelated+fullScreen+'&hd=1"';
if(options.allowFullScreen) {
html += ' allowfullscreen="true" ';
}
html += 'type="application/x-shockwave-flash" wmode="transparent" height="432" width="720"></embed>';
html += '</object>';
return html;
};
//grab a youtube id from a (clean, no querystring) url (thanks to http://jquery-howto.blogspot.com/2009/05/jyoutube-jquery-youtube-thumbnail.html)
function youtubeid(url) {
var ytid = url.match("[\\?&]v=([^&#]*)");
ytid = ytid[1];
return ytid;
};
//load inital video
var firstVid = selector.children("li:first-child").addClass("currentvideo").children("a").attr("href");
$("#"+options.holderId+"").html(play(youtubeid(firstVid)));
//load video on request
selector.children("li").children("a").click(function() {
if(options.showInline) {
$("li.currentvideo").removeClass("currentvideo");
$(this).parent("li").addClass("currentvideo").html(play(youtubeid($(this).attr("href"))));
}
else {
$("#"+options.holderId+"").html(play(youtubeid($(this).attr("href"))));
$(this).parent().parent("ul").find("li.currentvideo").removeClass("currentvideo");
$(this).parent("li").addClass("currentvideo");
}
return false;
});
//do we want thumns with that?
if(options.addThumbs) {
selector.children().each(function(i){
var replacedText = $(this).text();
if(options.thumbSize == 'small') {
var thumbUrl = "https://img.youtube.com/vi/"+youtubeid($(this).children("a").attr("href"))+"/2.jpg";
}
else {
var thumbUrl = "https://img.youtube.com/vi/"+youtubeid($(this).children("a").attr("href"))+"/0.jpg";
}
$(this).children("a").empty().html("<img src='"+thumbUrl+"' alt='"+replacedText+"' />"+replacedText).attr("title", replacedText);
});
}
});
};