Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Working > Video Box
Mottie (SuperAdmin) 9/8/2009 1:38 AM EST : Video Box
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

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

Content Box

<style type="text/css">
#videoContainer, #videoBox { text-align: center; margin: 0 auto; }
#videoContainer select { background: #222; color: #ddd; }
</style>
<script type="text/javascript">
/* Starting video sizes */
var videoWidth = "457";
var videoHeight = "344";
$(document).ready(function(){
 $('#vbSize').change(function(){ setSize(this.value) });
 $('#vbGroup').change(function(){ setSecondSelect(this.value) });
 $('#vbSubGroup').change(function(){ setVideoBox(this.value,this.options[this.selectedIndex].title) });
 $('#videoBox').css({ 'min-height' : videoHeight + 'px', 'min-width' : videoWidth + 'px'});
})
var vbInitialHt = videoHeight;
function setSize(multiplier) {
 var tmp = parseFloat( multiplier );
 ratio = $('#videoBox').attr('rel') || 1.33;
 videoWidth = Math.floor( (vbInitialHt * ratio) * tmp );
 videoHeight = Math.floor( vbInitialHt * tmp );
 $('#videoBox').height( videoHeight ).width( videoWidth );
 $('#videoBox embed').height('100%').width('100%');
 $('#videoBox object').height('100%').width('100%');
}
function setSecondSelect(boxnm) {
 if (boxnm == "blank") {
  var a = "<select><option value='blank' selected='selected'>&lt;- select</option></select>";
 } else {
  var tmp = $('#'+boxnm).html();
  var a = "<option value='blank' selected='selected'>Select a video</option>" + tmp.substring( 4, tmp.length - 3 );
 }
 $('#vbSubGroup').html(a);
 setVideoBox("blank");
}
function setVideoBox(vn,r) {
 if (vn == "blank") return;
 var fv = ''; /* flash variables */
 var ratio = parseFloat(r); /* Other ratios */
 if (r.toLowerCase()=='hd') ratio = 1.78 /* Widescreen (16:9) */
 if (r=='') ratio = 1.33 /* Standard definition (4:3) */
 var tmp = vn;
 /* Use embed code if it exists */
 if (vn.match("<embed")){
  $('#videoBox').html(tmp);
  setSize($('#vbSize').val());
  return;
 }
 /* DAILY MOTION */
 if (vn.match("dailymotion.com")){
  tmp = 'http://www.dailymotion.com/swf/' + gls(vn);
  if (vn.match("\/hd\/") && r != ratio ) ratio = 1.78;
 }
 /* GOOGLE - aspect ratios are the same as YouTube */
 if (vn.match("video.google")) tmp = 'http://video.google.com/googleplayer.swf?docid=' + gup('docid',vn) + '&fs=true';
 /* VIMEO */
 if (vn.match("vimeo.com")) {
  var vid = gls(vn);
  if (vid.match("hd#")){
   vid = vid.replace(/hd#/,'');
   if (r != ratio) ratio = 1.78;
  }
  tmp = 'http://vimeo.com/moogaloop.swf?fullscreen=1&clip_id=' + vid;
 }
 /* YAHOO */
 if (vn.match("video.yahoo.com")){
  var vid = vn.split('/');
  tmp = 'http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.2.46';
  fv = 'id=' + vid[vid.length-1] + '&vid=' + vid[vid.length-2] + '&embed=1';
 }
 /* YOU TUBE - YouTube is weird, it uses 1.23 for standard def and 1.65 for high def, but I'm ignoring that here.. so defaults of 1.33 and 1.78 apply */
 if (vn.match("youtube.com\/watch")) tmp = 'http://www.youtube.com/v/' + gup('v',vn) + '&fs=1&rel=0&hd=1';
 $('#videoBox').attr('rel',ratio);
 setSize($('#vbSize').val());
 var a = '<object width="100%" height="100%"><param name="movie" value="' + tmp +
  '"/><param name="allowFullScreen" value="true"/><param name="allowscriptaccess" value="always"/><param name="flashVars" value="' + fv +
  '"/><em' + 'bed src="' + tmp + '" type="application/x-shockwave-flash" width="100%" height="100%" flashVars="' + fv +
  '" allowFullScreen="true" allowscriptaccess="always"></embed></object>';
 $('#videoBox').html(a);
}
function gls(t){
 return t.substring( t.lastIndexOf('/') + 1, t.length );
}
function gup(name, myString){
 name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
 var regexS = "[\\?&]"+name+"=([^&#]*)";
 var regex = new RegExp( regexS );
 var results = regex.exec( myString );
 if( results == null )
  return "";
 else
  return results[1];
}
</script>
<div id="videoContainer">
<select id="vbSize">
<option value="1" selected="selected">1.00 X</option>
<option value="1.25">1.25 X</option>
<option value="1.5">1.50 X</option>
<option value="1.75">1.75 X</option>
<option value="2">2.00 X</option>
<option value="2.25">2.25 X</option>
<option value="2.5">2.50 X</option>
</select>

<select id="vbGroup">
<option value="blank" selected="selected">Select a group</option>

<!-- 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 -->
<!-- ******************** -->

</select>

<select id="vbSubGroup"><option>&lt;- select</option></select>
<br><br>
<div id="videoBox"></div>
</div>

<!-- Add Subgroups below -->
<!-- ******************* -->


<div id="group1"><!--
 <option value="http://www.youtube.com/watch?v=grCTXGW3sxQ">The Guild - S1E1</option>
 <option value="http://www.youtube.com/watch?v=Qb7GNu3NN-E">The Guild - S1E2</option>
 <option value="http://www.youtube.com/watch?v=SrCoUqWns6g">The Guild - S1E3</option>
 <option value="http://www.youtube.com/watch?v=OplPTPdDSKA">The Guild - S1E4</option>
 <option value="http://www.youtube.com/watch?v=pKkVIbA5iyE">The Guild - S1E5</option>
--></div>

<div id="group2"><!--
 <option value="http://www.youtube.com/watch?v=kwSFSkJvwZ4&fmt=">Mah Na Mah Na</option>
 <option value="http://www.youtube.com/watch?v=JN5Mqr6tRlw&fmt=">Hugga Wugga</option>
 <option value="http://www.youtube.com/watch?v=mbs64GvGgPU&fmt=">Swedish Chef - Donuts</option>
 <option value="http://www.youtube.com/watch?v=ZqyFjVnWwto&fmt=">Chickens on a piano</option>
 <option value="http://www.youtube.com/watch?v=3KANI2dpXLw&fmt=">Beaker</option>
--></div>

<div id="group3"><!--
 <option value='http://www.youtube.com/watch?v=qNfDzfhRgkU&fmt='>Alizee - I'm Fed Up! (YouTube 4:3)</option>
 <option title='hd' value='http://www.youtube.com/watch?v=cKg6CVki5hk&fmt='>Wet - Trailer (YouTube 16:9)</option>
 <option title='hd' value='http://www.youtube.com/watch?v=P6p01-in6-k'>Legion - Trailer (YouTube 16:9)</option>


 <option value="http://www.dailymotion.com/swf/k6PSPCTi8oJ9pUKUV&related=1">Tunak Tunak (DailyMotion 4:3)</option>
 <option title='1.65' value='http://www.dailymotion.com/hd/video/xaduzi_the-secret-world-premier-trailer_videogames'>The Secret World - Trailer (DailyMotion 15:9)</option>

 <option value='http://www.vimeo.com/5336440'>Blip (Vimeo 4:3)</option>
 <option value='http://www.vimeo.com/hd#6235286'>The Forest (Vimeo 16:9)</option>
 <option title='2.33' value='http://www.vimeo.com/hd#4372064'>The Dark Knight Trailer (Vimeo 21:9)</option>

 <option value='http://www.hulu.com/embed/g5TJPRiAm4O00s-p1WU4RQ'>Celebrity Jeopardy (Hulu - unscalable)</option>
 <option value='http://www.hulu.com/embed/4Cf9luY6yUYdfjcEPzcNGQ'>Legend of the Seeker S1E1 (Hulu - unscalable)</option>

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

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

 <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><br /><a href="http://video.yahoo.com/watch/5292856/13959401">Skateboarding Bulldog!</a> @ <a href="http://video.yahoo.com" >Yahoo! Video</a></div>'>Skateboarding Bulldog (using full embed code)</option>

--></div>

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* &lt; 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:

      • 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><br /><a href="http://video.yahoo.com/watch/5292856/13959401">Skateboarding Bulldog!</a> @ <a href="http://video.yahoo.com" >Yahoo! Video</a></div>'>Skateboarding Bulldog (using full embed code)</option>
      Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
      TopBottom

       
       
      Key 
      New posts No new posts
      New posts ( popular ) No new posts ( popular )
      New posts ( sticky ) No new posts ( sticky )
      New posts ( locked ) No new posts ( locked )
       
       
      Who's Online 
      There are   members online.
       
       
      So-and-so has logged on!
      %title%
      %message%