Digg Style Videos For Your Blog

Digg's recent design changes incorporating in-site embedded videos as a major feature of their site should be a sign to every blogger that web 2.5 is here and if 2.0 was social, 2.5 is video. The great news is that it's very easy to incorporate Digg style video embedding in your own site. The only thing you need is a spot of CSS, a dash of Javascript, and a few snippets of HTML for a result that out-Diggs, Digg.

A full, working sample page from this article can be found at http://www.hunlock.com/examples/diggVideo.html You can also see a working example without leaving this page by clicking this link.

Introduction

A few weeks ago I wrote an article titled Javascript Drag and Drop. It detailed how to set up a floating layer and embed a video in it. A few days later Digg unveiled their new site design and incorporated a pop-up window with an embedded video player. I believe my drag and drop article does videos better just for the cool factor of grab and drag frames, but Digg did two things my example didn't. One, it handled more video services and two, it grayed out the background so the user could focus on the video and avoid complications with other clickables on the site while the video was running.

And so I sat down and expanded on my original example code. If you'd like an overview of how drag and drop works please see the original article. This article will be going over the new additions and how to use this lightweight script in your blogs.

Download

You'll either need to copy the javascript block from the example page or you can download the javascript include file., unzip it, and upload it to your server. If you download the include file just add…

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

… somewhere in your document header.

Use

With the script included all you have to do is find a video you like on one of the major services and copy the url from the browser location line. For instance if you visit the youTube page at…

http://www.youtube.com/watch?v=s4_4abCWw-w

Then all you need to do is to copy this URL from the browser's location line and paste it into your web page like this…

<A HREF="http://www.youtube.com/watch?v=s4_4abCWw-w" onClick='return playVid(this)'>Open YouTube Video</A>

The HREF is just the browser URL you copied from youtube. What lets floating videos work is the next part where we added onClick='return playVid(this)'. When the user clicks on this link it's going to call playVid(this) and that will start the video for you. If the user doesn't have javascript enabled they'll just get bumped out to the actual youTube page and they can watch it from there.

It really is that simple!

With some video services we can't use the browser URL we have to use the URL in the EMBED tag. Here's a breakdown of the services this script supports and how you access them.

YouTube Video          Browser URL         Autostarts
Google Video           Browser URL         Autostarts
Metacafe Video         Browser URL         Autostarts
iFilm Video            Browser URL         Autostarts
MSN Soapbox            LINK URL*           Autostarts
Daily Motion           EMBED URL           Autostarts
Atom Films             Browser URL         Does not Autostart
Break Video            EMBED URL           Does not Autostart
Shoutfile              EMBED URL           Does not Autostart

* MSN uses flash for navigation which means the URL of the video doesn't appear in the browser's location bar. Underneath the playing video is a field titled link, just clip that url and use it.

Again, for the services which support the browser URL just visit the page of the video you want and copy the url from the browser's location bar. Then simply copy the url into the following template, replacing {URL GOES HERE}.

<A HREF="{URL GOES HERE}" onClick='return playVid(this)'>Check this cool video!</A>

Services which use the EMBED tag are slightly more complicated. Here you'll need to find the EMBED html somewhere on the web page. Daily Motion's embed will look something like this...

<div>
<object width="425" height="335">
   <param name="movie" value="http://www.dailymotion.com/swf/2MBntGAz7yxL35dYy"></param>
   <param name="allowfullscreen" value="true"></param>
   <embed src="http://www.dailymotion.com/swf/2MBntGAz7yxL35dYy" type="application/x-shockwave-flash" 
    width="425" height="334" allowfullscreen="true"></embed>
</object>
<br/><b><a href="http://www.dailymotion.com/video/xqoxi_tony-vs-paul">Tony vs paul</a>
</b><br /><i>Uploaded by <a href="http://www.dailymotion.com/loranger">loranger</a></i></div>

The URL here is http://www.dailymotion.com/swf/2MBntGAz7yxL35dYy which was pulled from the line which starts <embed src="http://www.dailymotion.com/swf/2MBntGAz7yxL35dYy".

Once you have this URL, you copy it into your <A> link on your web page just like you would a YouTube video.

<A HREF="http://www.dailymotion.com/swf/2MBntGAz7yxL35dYy" onClick='return playVid(this)'>Daily Motion Video</A>

Profit!

And there you have it, a relatively painless way to include videos in your blog! Now go grab your video camera and take a 10 hour video of your cats while you're away at work, no site is complete without 10 hours of cat videos!

Tweak!

If you're a power-user then there are a ton of tweaks you can do. If you're comfortable with javascript then you can just dive into the script and make any style changes there.

The function playVid always returns false so return playVid(this) always returns false to the browser. This means that if the user has javascript playVid will go ahead and play the video and the browser won't actually navigate to the URL. If the user doesn't have javascript or has it turned off then the browser will navigate to the URL just like it was a normal hyperlink. In playVid(this), "this" just passes the information about the object being clicked on to the playVid function, in this case it passes it the URL in the HREF attribute so we don't have to type it again.

playVid has an optional second parameter. If you pass true as the second parameter the background will not be grayed out. So if you like movable, dragable videos but don't want the digg style grey background when they're playing just change your playVid calls to read as.. playVid(this, true).

Style The Player

If you're more into HTML/CSS then there are still options for you! This script uses two divisions, id='blackout' and id='vidPane'. If you do not create the divisions in the HTML, this script will automatically create, and style them. If you DO create the divisions in the HTML manually, you can create your own stylesheets for them. To do this insert the following lines somewhere in the <body> area of your document.

<div id='vidPane' class='vidFrame'></div>
<div id='blackout'></div>

Once you do this you *MUST* set up a style sheet for these two divisions. Copy the following styles and insert them into the style sheet at the top of the page.

.vidFrame       { 
                   position: absolute;
                   display: none;
                   z-index: 100;
                   width: 435px;
                   height: 372px;
                   border: 1px solid #800000;
                   cursor: move;
                   font-family: verdana;
                   font-size: 9pt;
                   background-color: #ffdead;
                }
#blackout       {
                   display: none;
                   position: absolute;
                   z-index: 50;
                   left: 0px;
                   top: 0px;
                   opacity: .9;
                   filter:alpha(opacity=90);
                   background-color: #555555;
                }

The first three lines of .vidFrame must *NOT BE CHANGED*. It's also probably unwise to mess with the width and height. Anything after that is fair game however. It's safe to change the border, cursor, font, and background color. You can adjust the opacity, filter and background-color in #blackout, but all the other values should be left alone.

The VidFrame class styles the video window and #blackout styles the division which greys out the screen (ala dig). Both start out hidden (display none). And both are positioned absolutely -- vidframe so the layer can be moved, and blackout so we can start it in the absolute upper left hand corner of the screen (which we do with left and top). You can and should, adjust the background colors to something more in touch with your site. Blackout's transparency is set with "filter" for IE, and opacity for Firefox.

Importantly, vidFrame has a z-index of 100 and blackout has a z-index of 50. This tells the browser that vidframe floats on top of blackout, and blackout's own relatively high z-index (still less than vidframe) will ensure that it floats above most every other object on the web page unless you deliberately give an object a z-index higher than 50.

Because we stretch the blackout division to be the full width and height of the web page (this is done in the playVid() function, and because blackout has a high z-index when the layer is visible, anywhere the user clicks on the page is a click on blackout. Even if the user sees a link through the transparency and clicks on it, he's actually clicking on blackout and nothing will happen. vidFrame has a higher z-index though so any clicks on that will still be processed because it is on top of blackout (and every other element on the page).

Older Browser Support

If you'd like to provide somewhat better support for older browsers, then you'll need to add the division tags and style sheets as described in the Style The Player section. This eliminates the need for the script to dynamically create the division which provides somewhat better compatibility with ancient browsers.

Conclusion

And there you have it, a simple, easy to use script that lets you have floating videos on your web-page ala Digg, all wrapped up in a simple copy and paste interface. If you know how to autostart one of the video services which doesn't, or you know of another video service you'd like to see as part of this script, please drop me a note (email link is at the bottom of this page) with the service (and if you supply the autostart codes you will make me a very happy coder).

---

Addendum

This article and examples were updated on February 6. The changes are as follows...

1. Shoutfile video calls were fixed
2. It's no longer required to create the video and blackout divisions and their styles.
3. Added support for Atom Films (even though I can't see anyone actually using it)
4. Reorganized the article to account for the above changes.
5. Changed the example page to link to a new video since the old one had been removed.