Table of Contents:
Current version
Latest update


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: 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" src="./js/jquery.youtubecloud.swfobject.js"></script>

<script type="text/javascript">
   $(document).ready(function() {

<!-- Just the id or the whole URL, all of them will generate a valid video -->
<div id="Div1">

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).

Click here to download the JavaScript file of YoutubeCloud with the swfobject.js by Google incorporated (no need for additional files).

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
  • The first version of YoutubeCloud is developed.