Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > How to add a video box
Mottie (MVP) 6/13/2008 9:17 AM EST : How to add a video box
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Do you have a web site that has 10 youtube videos on the front page? Well here's a way to still have all the videos you want (and more) but with little clutter 

Just add the content below, preferably into a center column.

Content Box (Free Form Text/HTML)
<script type="text/javascript">
function setVideoBox(videonm) {
 if (videonm == "blank") {
  var a = "&nbsp;";
 } else {
  var a = videonm;
 }
  document.getElementById('videoBox').innerHTML = a;
}
</script>
<div style="text-align:center"><select onchange="setVideoBox(this.value)">
<option value="blank">Select a video</option>

 <option value='<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/kwSFSkJvwZ4&hl=en"></param><embed src="http://www.youtube.com/v/kwSFSkJvwZ4&hl=en" type="application/x-shockwave-flash" width="425" height="344"></embed></object>'>
 Mah Na Mah Na
 </option>

 <option value='<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/4wGR4-SeuJ0&hl=en"></param><embed src="http://www.youtube.com/v/4wGR4-SeuJ0&hl=en" type="application/x-shockwave-flash" width="425" height="344"></embed></object>'>
 Chad Vader - Day Shift Manager (episode 1)
 </option>

 <option value='<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/grCTXGW3sxQ&hl=en"></param><embed src="http://www.youtube.com/v/grCTXGW3sxQ&hl=en" type="application/x-shockwave-flash" width="425" height="344"></embed></object>'>
 The Guild - Episode 1
 </option>


<!--
 ************************************
 Copy the HTML below and paste in the
 embeded link and type in the name
 ************************************
 <option value='{insert embeded video link here}'>
 {Name of the video here}
 </option>


 ************************************
-->

</select></div>
<br><br>
<div id="videoBox" style="text-align:center; height:344px;"></div>
To customize this for your site:

  • First, delete all the code in green above (unless you like my three video choices LOL)
  • Copy (CTRL-C) the code that is blue and red and paste it (CTRL-V) where the green text is for each video you want to add.

  • Find your favorite youtube videos

  • Copy (CTRL-C) the code from youtube to embed the video on your page (I drew a red box around it in the image below).



  • Now replace the text {insert embeded video link here} above with this embed code by highlighting the red text and pasting it (CTRL-V).

    ** NOTE: it is VERY important to leave the single quotes surronding this embed code!

  • Replace {Name of the video here} with the name of the video.

  • Repeat the above steps as many times as you want.
You can see this video box in action on my test site here.
TopBottom

Mottie (MVP) 8/6/2008 6:42 PM EST : RE: How to add a video box
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Here is another way to add a video box, it may be a little "cleaner" than the method above but I can't call it version 2, because it uses the built in pop-up window.

This is what it looks like (click on a link)

Azerothian Super Villians


The Code (first link from the example above)
<a rel="facebox" href="#video1">Episode 1</a>

<div style="display: none;"><div id="video1" align="center">
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/u2WG-9wocwM&amp;hl=en&amp;fs=1"><param name="allowFullScreen" value="true"><embed src="http://www.youtube.com/v/u2WG-9wocwM&amp;hl=en&amp;fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></object>
</div></div>
Customizing the code
  • A blank block of code would look like this:

    <a rel="facebox" href="#video1">VIDEO TITLE</a>
    <div style="display: none;"><div id="video1" align="center">
    <VIDEO EMBED CODE>
    </div></div>

  • The text in blue is the ID to the block of code, the link must have a "#" sign in front (#video1), and the rest of the div id MUST match (video1) or it won't work. When you add the next link, change the div id, in the example above I just made it video2.

  • Replace the green text with the title of the video

  • Replace the orange text with the Embed code from whatever video site you choose: YouTube, Veoh, etc.
Styling the popup box
  • See this post about changing the style of the box, styles inside and dimming the area outside the box
TopBottom

LochenTwo (Guild Admin) 8/11/2008 11:13 AM EST : RE: How to add a video box
Artiste!
LochenTwo
Posts: 2072
Zomgawsh Poster

The only bad thing about so many nifty things being posted is I don't know where to start first 
I really have to make myself finish the tab buttons and content box borders first...

TopBottom

Kaysi (Guild Admin) 9/25/2008 12:25 AM EST : RE: How to add a video box

Kaysi
Posts: 445
Fingers of Fury!

Question!

For your version 1, is there any way to have two pull down boxes to better organize the videos?

For example, guild boss kill videos. Can the first box be to identify the instance, and then depending on which instance the second box would allow you to choose the videos for the bosses in that instance?

Just wondering!

~Thank you!
Miria Signature
"I can heal any flashpoint, quest, or player, but I can't heal stupidity."
TopBottom

Mottie (MVP) 9/25/2008 10:02 AM EST : Video box v3
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Kaysi,

I somehow thought that this would be easy LOL... I remember there was code for the selection box on Dynamic Drive. But, sadly, it's very complex and won't work on Guildportal since it uses forms. So, I went back to the drawing boards and came up with this solution.

Video box v3
This version of the video box does two new things. (1) Videos are grouped and can be selected from a drop down menu. (2) You can change the video size on the fly (at least it does in Firefox and Chrome).



Content Box
<style>
#videoContainer, #videoContainer select { background:#000000; color:#ffffff; }
#videoBox { background:#000000; text-align:center; min-height:344px; }
</style>
<script type="text/javascript">
var videoWidth = "425";
var videoHeight = "344";
function setsize (multiplier) {
 var z = parseFloat(multiplier);
 var x = Math.floor(425*z);
 var y = Math.floor(344*z);
 videoWidth = x;
 videoHeight = y;
 try {
  document.getElementById('videoBox').height = y;
  document.getElementById('vb1').height = y;
  document.getElementById('vb1').width = x;
  document.getElementById('vb2').height = y;
  document.getElementById('vb2').width = x;
 } catch (err) {}
}
function setSecondSelect (boxnm) {
 if (boxnm == "blank") {
      var a = '<select><option value="blank" selected="selected">&lt;- select</option></select>';
 } else {
      var x = document.getElementById(boxnm).innerHTML;
   var a = '<select onchange="setVideoBox(this.value)"><option value="blank" selected="selected">';
   a += 'Select a video</option>';
   a += x.substring(4,x.length-3);
   a += '</select>';
 }
 document.getElementById('box2').innerHTML = a;
 setVideoBox("blank");
}
function setVideoBox(videonm) {
 if (videonm == "blank") {
  var a = "&nbsp;";
 } else {
  if (videonm.match("youtube.com/watch")) {
   var x = 'http://www.youtube.com/v/' + gup('v',videonm);
  } else {
   var x = videonm
  }
  var a = '<object id="vb1" width="'+ videoWidth + '" height="'+ videoHeight + '"><param name="movie" value="';
  a += x + '"></param><em' + 'bed id="vb2" src="' + x;
  a += '" type="application/x-shockwave-flash" width="'+ videoWidth + '" height="'+ videoHeight;
  a += '"></embed></object>';
 }
  document.getElementById('videoBox').innerHTML = a;
}
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" style="text-align:center">
<select onchange="setsize(this.value)">
<option value="1" selected="selected">1x</option>
<option value="1.25">1.25x</option>
<option value="1.5">1.5x</option>
<option value="1.75">1.75x</option>
<option value="2">2x</option>
</select>

<select onchange="setSecondSelect(this.value)">
<option value="blank" selected="selected">Select a group</option>

<option value="group1">The Guild</option>
<option value="group2">Muppets</option>
<option value="group3">Chad Vader</option>
<option value="group4">Music Videos</option>
</select>

<span id="box2"><select><option>&lt;- select</option></select></span>

<div id="group1"><!--
 <option value="http://www.youtube.com/watch?v=grCTXGW3sxQ">The Guild - Episode 1</option>
 <option value="http://www.youtube.com/watch?v=Qb7GNu3NN-E">The Guild - Episode 2</option>
 <option value="http://www.youtube.com/watch?v=SrCoUqWns6g">The Guild - Episode 3</option>
 <option value="http://www.youtube.com/watch?v=OplPTPdDSKA">The Guild - Episode 4</option>
 <option value="http://www.youtube.com/watch?v=pKkVIbA5iyE">The Guild - Episode 5</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=4wGR4-SeuJ0&fmt=">Chad Vader - Day Shift Manager (episode 1)</option>
 <option value="http://www.youtube.com/watch?v=NPVlljVWqBg&fmt=">Chad Vader - Day Shift Manager (episode 2)</option>
 <option value="http://www.youtube.com/watch?v=gh8u6nTx8wY&fmt=">Chad Vader - Day Shift Manager (episode 3)</option>
 <option value="http://www.youtube.com/watch?v=ogIqayRDr4w&fmt=">Chad Vader - Day Shift Manager (episode 4)</option>
 <option value="http://www.youtube.com/watch?v=VAkOfoI3SpE&fmt=">Chad Vader - Day Shift Manager (episode 5)</option>
--></div>

<div id="group4"><!--
 <option value="http://www.dailymotion.com/swf/k6PSPCTi8oJ9pUKUV&related=1">Tunak Tunak</option>
 <option value="http://www.youtube.com/watch?v=1Xq_fG2-tdI&fmt=">Warrior VS Paladin: The Musical!</option>
--></div>

</div>
<br>
<div id="videoBox"></div>

Customizing

Setting up Groups
  • To add a new group, you'll need to first add it to the group selector box - it looks like this:

    <option value="group1">The Guild</option>
    <option value="group2">Muppets</option>
    <option value="group3">Chad Vader</option>
    <option value="group4">Music Videos</option>

    Add this for a new group:

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

    Now replace the "group#" with the next number and the text in green with the group name.

  • Now you'll need to add the group's box:

    <div id="group#"><!--
     <option value="VIDEO #1 URL">VIDEO #1 TITLE</option>
     <option value="VIDEO #2 URL">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 (*Note* read the "Video URL" section below before adding the URL)

    Replace the text in purple with your Video's title

  • 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
  • YouTube: The script above is set up to allow you to add the basic YouTube URL. It looks like this:

    http://www.youtube.com/watch?v=1Xq_fG2-tdI&fmt=

  • DailyMotion & Other video sites: You'll need to find the URL to the video from the <embed> source. I pasted the an example below, you'll need to find "<embed src=" and copy the URL that follows

    <div><object width="420" height="306"><param name="movie" value="http://www.dailymotion.com/swf/k6PSPCTi8oJ9pUKUV&related=1"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.dailymotion.com/swf/k6PSPCTi8oJ9pUKUV&related=1" type="application/x-shockwave-flash" width="420" height="306" allowFullScreen="true" allowScriptAccess="always"></embed></object><br /><b><a href="http://www.dailymotion.com/video/x3v5t_tunak-tunak-tunlyricsparoles_fun">Tunak Tunak Tun+Lyrics+Paroles</a></b><br /><i>Uploaded by <a href="http://www.dailymotion.com/astre">astre</a></i></div>

    then you can paste that URL into the video box... sorry I wish I could make an easier way to do this.

  • Gamers Tubevideos require something a little different for this to work. Firstoff, change the double quotes in the <option> tag to singlequotes:

    <option value='VIDEO #1 URL'>VIDEO #1 TITLE</option>

    Thenget the <embed> source code from the site, like I pasted below.This time you'll need to copy everything in orange into the optionvalue, notice that it includes the "FlashVars" variable and some quotes,which is why you needed to replace the quotes in the option tag above.

    <embed src="http://www.gamerstube.com/videoplayer.swf"FlashVars="config=http://www.gamerstube.com/flvplayerembed.php?viewkey=df0f91258632682d0ae9" quality="high"bgcolor="#000000" width="450" height="315" name="flvplayer"align="middle" allowScriptAccess="always"type="application/x-shockwave-flash"pluginspage="http://www.macromedia.com/go/getflashplayer"allowFullScreen="true"/><br>watch more <ahref="http://www.gamerstube.com">Game Trailers and Videos</a>

    So the complete video option looks like this:

    <option value='http://www.gamerstube.com/videoplayer.swf"FlashVars="config=http://www.gamerstube.com/flvplayerembed.php?viewkey=df0f91258632682d0ae9'>AvCom Tutorial</option>
I've updated the video box that's in my Roster tab, so you can see it in action! Enjoy!

Edit (10/24/2008): Change the script slighty to keep GuildPortal's editor from changine one line.
Edited (1/12/2009): Added how to use the embed code from Gamers Tube into the video box.
TopBottom

Kaysi (Guild Admin) 9/25/2008 3:46 PM EST : RE: Video box v3

Kaysi
Posts: 445
Fingers of Fury!

I <3 you Mottie! Thank you!
Miria Signature
"I can heal any flashpoint, quest, or player, but I can't heal stupidity."
TopBottom

Mottie (MVP) 10/24/2008 6:35 AM EST : RE: Video box v3
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Thanks to Kahurin for finding this problem...

I updated the code in Video Box v3 above because when you go back to edit it, GuildPortal's editor would replace the "embed" code.

One line of code ended up looking like this:
a += x + '"></param><img isflash="true"  id="vb2" src="' + x;
It started out like this:
a += x + '"></param><embed id="vb2" src="' + x;
And here was the simple fix:
a += x + '"></param><em' + 'bed id="vb2" src="' + x;
TopBottom

Guppy Queen (New Admin) 10/9/2009 11:45 PM EST : RE: Video box v3
Guppy Queen
Posts: 41034
Zomgawsh Poster

This is a really neat feature Mottie.
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%