Chained Video Selection Box

This video box does two things.
(1) Videos are grouped and can be selected from a drop down menu.
(2) You can change the video size on the fly.

Click on the image below to see the demo page, view source for the full code.

Customizing

Setting up Groups

1. To add a new group, you'll need to first add it to the group selector box - it looks like the example below. Add the new group option in whatever order you desire.
   
   

   <!-- Add New Groups below -->
   <!-- ******************** -->
   
   <option value="group1">The Guild</option>
   <option value="group2">Muppets</option>
   <option value="group3">Misc Videos</option>
   
   <!-- Add New Groups Above -->
   <!-- ******************** -->

   Add this for a new group:
   
   

   <option value="group#">GROUP NAME</option>

   Now replace the "group#" with the next number and the text in yellow with the group name.
2. Now you'll need to add the group's box, follow this template:
   
   

   <div id="group#"><!--
   <option value="VIDEO #1 URL or Embed code">VIDEO #1 TITLE</option>
   <option value="VIDEO #2 URL or Embed code">VIDEO #2 TITLE</option>
   --></div>

   • Make sure the group# matches the number in the selector box
   • Replace the URL in orange with the video's URL or Embed code (*Note* read the "Video URL" section below before adding the URL)
   • Replace the text in purple with your Video's title.
3. If you want to change the displayed text from "Select a group", "Select a video" or "<- select". I highlighted the text in teal so you can find it easier. *Note* < is the HTML code for the left bracket "<".

Video URL or Embed Code

• Only certain sites have support for the URL shortcut versus using the entire embed code provided by the site, I could add more but it'll just make the code that much longer:
  
  
  
  • Daily Motion
  • Google Video
  • Vimeo
  • Yahoo
  • You Tube
    
    
• DailyMotion:
  
  

  <option value='http://www.dailymotion.com/video/x1bxhu_tunak-tunak-tun_fun'>Tunak Tunak (DailyMotion 4:3)</option>

• Google Video:
  
  

  <option value='http://video.google.com/videoplay?docid=3034123062262825045'>Final Fantasy X-2 Intro (Google 4:3)</option>

• Vimeo:
  
  

  SD:	<option value='http://www.vimeo.com/5336440'>Blip (Vimeo 4:3)</option>
  HD:	<option value='http://www.vimeo.com/hd#6235286'>The Forest (Vimeo 16:9)</option> <option title='hd' value='http://www.vimeo.com/6235286'>The Forest (Vimeo 16:9)</option> <option title='1.78' value='http://www.vimeo.com/6235286'>The Forest (Vimeo 16:9)</option>

  
  

  All three of the HD examples are equivalent. Note the "hd#" in the URL is specific for HD videos - so you could manually add this, but you may not get the HD version if it doesn't exist)

• Yahoo:
  
  

  <option value='http://video.yahoo.com/watch/5292856/13959401'>Skateboarding Bulldog! (Yahoo 4:3)</option>

• You Tube:
  
  

  SD:	<option value='http://www.youtube.com/watch?v=qNfDzfhRgkU&fmt='>Alizee - I'm Fed Up! (YouTube 4:3)</option>
  HD:	<option title='hd' value='http://www.youtube.com/watch?v=cKg6CVki5hk&fmt='>Wet - Trailer (YouTube 16:9)</option>

• All other Video sites: I'm using Yahoo here, but it applies to any site that provides an embed code... make sure there are no single quotes (apostrophes) in the code... Replace these with a \' (backslash + apostrophe) if you have to.
  
  

  <option value='<div><object width="512" height="322"><param name="movie" value="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.2.46" /><param name="allowFullScreen" value="true" /><param name="AllowScriptAccess" VALUE="always" /><param name="bgcolor" value="#000000" /><param name="flashVars" value="id=13959401&vid=5292856&lang=en-us&intl=us&thumbUrl=http%3A//l.yimg.com/a/i/us/sch/cn/video06/5292856_rnd9461b9a5_19.jpg&embed=1&ap=10513021" /><embed src="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.2.46" type="application/x-shockwave-flash" width="512" height="322" allowFullScreen="true" AllowScriptAccess="always" bgcolor="#000000" flashVars="id=13959401&vid=5292856&lang=en-us&intl=us&thumbUrl=http%3A//l.yimg.com/a/i/us/sch/cn/video06/5292856_rnd9461b9a5_19.jpg&embed=1&ap=10513021" ></embed></object>'>Skateboarding Bulldog (using full embed code)</option>