Videobox, a Youtube Video Browser

Demo

Videobox turns this:

<div class="videobox">
  <h4>Oh God Babies</h4>
  <ul>
    <li><a href="http://www.youtube.com/watch?v=5P6UU6m3cqk">Brrring</a></li>
    <li><a href="http://www.youtube.com/watch?v=I_mBLWpdwnI">Wii Golf</a></li>
    <li><a href="http://www.youtube.com/watch?v=dcCZABr_G1k">Quadruplets</a></li>
    <li><a href="http://www.youtube.com/watch?v=cXXm696UbKY">Falling Over</a></li>
    <li><a href="http://www.youtube.com/watch?v=Awm9nE8bJtI">Ninja Baby</a></li>
  </ul>
  <p>Click a thumbnail to view the video.</p>
</div>

Into this:

Oh God Babies

Click a thumbnail to view the video.

Videobox

Videobox is a Javascript program that takes a simple list of Youtube links and converts them into a simple embedded video browser.

This project began as an embedded video browser for the redesign of Yale Daily News. The new version you see here began as a throw-away project with the goal of keeping my Javascript skills up to date. The end result is fairly limited in scope (Youtube only), but it could easily be modified to go much further. Feel free to modify the Javascript and the CSS to suit your needs. If you find this code useful, all I ask in return is to drop me a line so I can see what you've done with it. Enjoy.

Files you will need

You will need the following files:

Setup

  1. Copy the four files listed above files into in the same directory as your HTML.
  2. Add the following code just before the </head> in your HTML: 
    <style type="text/css">@import "videobox.css";</style>
  3. Add the following code just before the </body> in your HTML: 
    <script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="videobox.js"></script>

Creating a Videobox

With the setup out of the way, creating a Videobox is easy. Wrap any unordered list (ul) of Youtube links in a div. Give that div a class of videobox and you're done. The header (h4) and the paragraph (p) in the example are for decoration and are not required.

<div class="videobox">
  <h4>Oh God Babies</h4>
  <ul>
    <li><a href="http://www.youtube.com/watch?v=5P6UU6m3cqk">Brrring</a></li>
    <li><a href="http://www.youtube.com/watch?v=I_mBLWpdwnI">Wii Golf</a></li>
    <li><a href="http://www.youtube.com/watch?v=dcCZABr_G1k">Quadruplets</a></li>
    <li><a href="http://www.youtube.com/watch?v=cXXm696UbKY">Falling Over</a></li>
    <li><a href="http://www.youtube.com/watch?v=Awm9nE8bJtI">Ninja Baby</a></li>
  </ul>
  <p>Click a thumbnail to view the video.</p>
</div>

Adding the videobox class to the div is the key. The Javascript looks for this class name and dynamically transforms any unordered list it contains to a Videobox. You can have more than one Videobox on a page.

This technique degrades gracefully. If a user has Javascript disabled, this is what they would see.

Oh God Babies

Click a thumbnail to view the video.

Summary and Notes

Here is an example of a barebones Videobox page. The code mentioned in the above steps is highlighted in white.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Videobox Demo</title>
  <style type="text/css">@import "videobox.css";</style>
</head>
<body>

  <div class="videobox">
    <h4>Oh God Babies</h4>
    <ul>
      <li><a href="http://www.youtube.com/watch?v=5P6UU6m3cqk">Brrring</a></li>
      <li><a href="http://www.youtube.com/watch?v=I_mBLWpdwnI">Wii Golf</a></li>
      <li><a href="http://www.youtube.com/watch?v=dcCZABr_G1k">Quadruplets</a></li>
      <li><a href="http://www.youtube.com/watch?v=cXXm696UbKY">Falling Over</a></li>
      <li><a href="http://www.youtube.com/watch?v=Awm9nE8bJtI">Ninja Baby</a></li>
    </ul>
    <p>Click a thumbnail to view the video.</p>
  </div>

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

</body>
</html>

The visual appearance of the Videobox is controlled with CSS. Minor changes like the width and colors of the box and borders can be made by simply modifying a few values in the CSS. More advanced changes such as making the thumbnails appear below the main video would require a good working knowledge of CSS, but should still be fairly trivial for someone well versed in its mysteries. If you're feeling adventurous, with a little tweaking of the Javascript and the CSS together, it would fairly easy to add titles and descriptions to the videos as well. All that is up to you. Take the scripts and use them how you wish.

Kudos to Youtube for having very hackable URLs.

The End

As far as I know, this technique works in Firefox, IE 5.5, IE 6, IE 7, Opera 9, and Safari 3 Windows. Opera versions 8 and earlier fail gracefully. Mac browsers are untested. Someone buy me a Mac.

If you have any questions, comments, or ideas on improving the code improve the code, please send me a note.


Pup, Inc.

Last updated October 23, 2007

Back to Pup, Inc.