Recently asked on Yahoo! Answers:

HTML Help - Dropbox with Loading Option?

Okay, here’s my issue. I have a decent piece of coding that gives me a dropbox. The dropbox has a ‘go’ button, and it is filled with titles of music videos from YouTube.

Now, used alone, it’s fine. It opens a new page, which plays the youtube video.

However, I was clever enough to grab the *embed* names. So, it doesn’t load a simple youtube page, but simply the video in a website.

So now, I need some HTML help. I would like to create an object that sits next to the dropbox and plays the video when you select ‘go’, instead of it loading a new page.

I know how to make an embedded video. I know how to make the dropbox. Unfortunately, I don’t know how to make the dropbox and the embedded video interact, so that I can select the video I want to play.

This is very easy to do, thanks to deconcept’s excellent SWFObject JavaScript library and the questioner’s work in extracting the Flash FLV player URLs from all the videos he wants to show.

So, let’s get right on making a YouTube jukebox!

Step 1: The Form

Our form couldn’t be simpler: It’s just a SELECT list that holds all the URLs to our files, which also has an onchange event set to a JavaScript function named playMovie(). We’ll create that function soon.

<form id="form1" name="form1" method="post" action="">
	<label>Select A Video:
		<select id="jukeVids" onchange="playVideo(1, 0)">
			<option value="" selected="selected">Select ...</option>
			<option value="http://www.youtube.com/v/PrZQIayUnbA">"The Omega Kawaii Cloud Song" - Nellie Malton</option>
			<option value="http://www.youtube.com/v/171C8yZIj_M">"How Much You Annoy Me" - Dr. Cox</option>
			<option value="http://www.youtube.com/v/s2Qv2mGCGzQ">"Resident Evil Montage Rumble" - ShadowLeggy</option>
			<option value="http://www.youtube.com/v/WMvAzYH1xHM">" Numa Numa" (Resident Evil) - O-Zone</option>
			<option value="http://www.youtube.com/v/9jGFj4gAaxU">"Beverly Hills" (Halo Version) - Weezer</option>
			<option value="http://www.youtube.com/v/FHGvh3i35Uk">"He Said, She Said" - Maldroid</option>
			<option value="http://www.youtube.com/v/YxZJYbVd1hE">"Heck No! (I'll Never Listen to Techno)" - Maldroid</option>
			<option value="http://www.youtube.com/v/8Rp9XvD5kXg">"Wizard Needs Food Badly" - Five Iron Frenzy</option>
			<option value="http://www.youtube.com/v/KCeQuqMS9Ww">"Somewhere Over the Rainbow" - Ted's Band</option>
			<option value="http://www.youtube.com/v/3QIWX5CcLi8">"Casino Royale" (Casino Royal Theme Version) - Chris Cornell</option>
			<option value="http://www.youtube.com/v/if0_gzrIWCM">"Smoke the Wii" - The FanBoiz</option>
			<option value="http://www.youtube.com/v/91AlqOYkiaE">"Bananaphone" (Half-Life 2 Version) - sh00rty</option>
			<option value="http://www.youtube.com/v/6NXqbau-CKE">"Grand Theft Autumn Parody" - Fall Out Boy (Parody)</option>
			<option value="http://www.youtube.com/v/UBbTYaG-_nM">"Seven Minutes In Heaven Parody" - Fall Out Boy (Parody)</option>
			<option value="http://www.youtube.com/v/q_RZRTYZ2z8">"Kryptonite" (Resident Evil 4 Version) - Three Doors Down</option>
			<option value="http://www.youtube.com/v/FA9N_2kKQ0w">"Trogdor" (GH2 Version) - Strong Bad</option>
			<option value="http://www.youtube.com/v/4ttidEl0gXU">"The Saga Begins" - Weird Al Yankovic</option>
			<option value="http://www.youtube.com/v/24rG_-H2nqo">"Couch Potato" (Live) - Weird Al Yankovic</option>
			<option value="http://www.youtube.com/v/-xEzGIuY7kw">"White and Nerdy" - Weird Al Yankovic</option>
			<option value="http://www.youtube.com/v/vpBmrgJtA3s">"Dance Dance Parody" - Fall Out Boy (Parody)</option>
			<option value="http://www.youtube.com/v/SNygDdAJ8uc">"Numb" (Phoenix Wright Version) - Linkin Park</option>
			<option value="http://www.youtube.com/v/k52HCHOSpr0">"All Your Base" - Master Samurai</option>
			<option value="http://www.youtube.com/v/Plos2SvAu9Y">"School of Rock" (GH2 Custom) - School of Rock</option>
		</select>
	</label>
</form>

Step 2: The DIV

We also need a simple DIV in which we will dynamically place the Flash player we get from YouTube. That’s as simple as making a DIV that has an ID of jukePlayer. I’ve also set aside some CSS code to space for the player once it comes in, by fixing the DIV’s height and width to the size of the average Flash player.

<div id="jukePlayer"></div>

div#jukePlayer {
	width: 425px;
	height: 350px;
	margin: 10px 0 10px 0;
}

Step 3: deconcept’s SWFObject JavaScript

We need a way to dynamically change the DIV’s innerHTML to be an embedded instance of the Flash Player. Thankfully, there’s a great JavaScript library out there already that will do that for us: deconcept’s SWFObject.

All we need to do is download the JavaScript they supply, upload the enclosed swfobject.js file to our Web site, and make reference to it with a SCRIPT tag in our page’s HEAD segment.

<script type="text/javascript" src="swfobject.js"></script>

Step 4: The playMovie() Script

To bring it all together, we need to make a script that gets the chosen item in our SELECT menu and drop its video into our DIV. That’s as easy as getting the SELECT via getElementById, then iterating through all its options until we find the selected item.

Once we find the selected item, we create a new SWFObject, pass it the parameters it needs, and tell it to place the player in our DIV.

Note that we also accept two arguments in the playMovie() function: autoplay and loop. If you send a value of 1 for autoplay, then the video will start playing once it loads; if you send a value of 1 for loop, the video will play back continuously.

You must send values for both parameters, but only values of 1 matter; any other value will be ignored.

function playVideo(autoplay, loop) {
	var theSelect = document.getElementById("jukeVids");
	var theArgs;
	if(autoplay == 1) {
		theArgs = "&autoplay=1";
	}
	if(loop == 1) {
		theArgs += "&loop=1";
	}

	for(var i = 0; i < theSelect.length; i++) {
		if(theSelect.options[i].selected) {
			var so = new SWFObject(theSelect.options[i].value + theArgs, "mymovie", "425", "350", "8", "#fff");
			so.write("jukePlayer");
			break;
		}
	}
}

And that’s all there is to it. You can see the script in action here:

http://www.dougv.com/demo/js_youtube_jukebox/

You can simply save the page to your computer and modify it to your content. My work is distributed under the latest version of the Creative Commons Attribution / Share-Alike License.

This entry was posted on Monday, July 2nd, 2007 at 10:35 pm PDT and is filed under AJAX / JavaScript / DOM, Programming, Yahoo! Answers. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.