For a recent client project, we wanted to be able to turn a list of YouTube links into a playlist. This would allow the client to manage their videos on YouTube and simply insert links to the videos on their site. With javascript enabled a nice playlist is created, whilst without javasript the user gets a regular list of links to youtube pages.
Demo showing the plugin with default options.
Demo showing the plugin set up to act like a gallery of YouTube videos.
Using the plugin
The plugin acts on a simple unordered list containing links to YouTube videos, e.g.1.
<
div
class
=
"yt_holder"
>
2.
<
div
id
=
"ytvideo"
></
div
>
3.
<
ul
class
=
"demo1"
>
4.
<
li
><
a
href
=
"http://www.youtube.com/watch?v=QBBWKvY-VDc"
>Video 1</
a
></
li
>
5.
<
li
><
a
href
=
"http://www.youtube.com/watch?v=ZXMQqLnRhRI"
>Video 2</
a
></
li
>
6.
<
li
><
a
href
=
"http://www.youtube.com/watch?v=Wvo-g_JvURI"
>Video 3</
a
></
li
>
7.
</
ul
>
8.
</
div
>
1.
$(
function
() {
2.
$(
"ul.demo1"
).ytplaylist();
3.
});
Plugin options
Option - (default)holderId - (ytvideo)
The ID of the element (usually a div) into which the YouTube video will be inserted
playerHeight - (300)
The height of the embdedded youtube video
playerWidth - (450)
The width of the embdedded youtube video
addThumbs - (false)
Use true to add video thumbnails to each list item
thumbSize - (small)
Size of added thumbnails. Default is small, use large for larger thumbnails
showInline - (false)
If this option is true, the list item containing the link will be replaced with the YouTube video. See the gallery demo for an example of this.
autoPlay - (false)
true or false, whether or not to autoplay videos
showRelated - (true)Set to false to stop related videos being shown at the end of the embedded video
0 comments:
Post a Comment