YoutubeCloud |
|
|---|---|
| Table of Contents: | |
| Current version Latest update | 1.0 02/22/2011 |
After developing two jQuery plug-ins related directly to the Google Doodles (the one from Christmas and the one honoring Jules Verne), I decided to create a few plug-ins of my own. "Made in Alvaro." This one is the first one, although as you may have guessed, it is closely related to the one titled imageCloud.
But I must say it is not fully "Made by Alvaro." Jill helped me with the idea: "Wouldn't it be nice to have videos and not only photos?" Then she described the options that she would like to have, and from that it was easy to start developing.
This plug-in takes the IDs or URLs of different Youtube videos and, using the Youtube JavaScript API (available below to download or directly incorporated in the plug-in), displays a different cloud of videos (with the provided IDs) every time that you refresh the page. When you mouse over a video, it will grow and the sound will fade in. When you mouse out of the video, it will shrink and the sound will fade out. Simple, no? And the videos are looping infinitely.
Although it is fully functional and working, there are still a lot of things that could be improved. So, if you decide to use it, I will really appreciate if you send me a message with comments, bugs, opinions...
As the imageCLoud plug-in, YoutubeCloud is highly customizable (and more options to come!). You can provide different parameters:
- Width: Number. It sets the width of the area where the videos will be displayed. Default value: 600.
- Height: Number. It sets the height of the area where the videos will be displayed. Default value: 400.
- videoWidth: Number. This is the size of the video when not active. Default value: 100.
- proportion: Number. It's the proportion height/width of the video. Default value: 0.75 (3/4).
- grow: Number. It sets how much the video will grow on mouse over. Default value: 2.
- Pause: true|false. Indicates if the video will pause on mouse out. Default value: false.
- flashVersion: Number. Sets the mininum versio of Flash needed to watch the videos. Default value: 8.
- Speed: Number. It indicated the speed of the effect; a lower value means a faster effect. Default value: 200.
- BorderSize: Number. It is the size of the border in pixels. Default value: 5.
- BorderColor: Color type. This is the border color for the images. Default value: #800000 (dark red).
- BorderStyle: Border-style type (solid|dotted|dashed|inset|...). Default value: "solid".
width: 600,
height: 400,
videoWidth: 100,
proportion: 0.75,
videoWidth: 100,
grow: 2,
flashVersion: 8,
pause: false,
speed: 1000,
borderSize: 3,
borderColor: "#800000",
borderStyle: "groove",
});
});
As a picture says a thousand words, you can see a working example here. It is a set of videos with touristic information about Spain (mainly Andalucia and Madrid). But if you like music, you can see another example here, full of music by Paramore.
To use YoutubeCloud you need to call the youtubecloud method from the div that you holds the information of the youtube videos:
<script type="text/javascript">
$(document).ready(function() {
$("#Div1").youtubecloud({
...options...
});
});
</script>
<!-- Just the id or the whole URL, all of them will generate a valid video -->
<div id="Div1">
<span>slDhkgisaYQ</span>
<span>http://www.youtube.com/watch?v=qmlmAizq2j0</span>
<span>http://www.youtube.com/watch?v=lAQHZ--ou3k&feature=related</span>
...
</div>
Note that inside the div, you have to put <span>, and inside each of them the ID of the Youtube video (or the whole URL of the Youtube video if you don't know how to get the ID.
Click here to download the JavaScript file of YoutubeCloud (you will also need the swfobject.js file by Google).
Why these two versions? If you are using the Youtube API on your Web site, you may not want to use the file that incorporates the swfobject.js inside, as you may have it already in your project. If you are not using the Youtube API on your Web pages, we recommend that you download jquery.youtubecloud.swfobject.js.
Here there is a list of the different updates and versions that the YoutubeCloud plug-in has gone through since I started developing it in February 2011:
| Date | Version | Changes and comments |
|---|---|---|
| 02/22/2010 | v1.0 |
|