We recently had a project wherein we needed to embed a collection of YouTube videos, but without the navigation bar. Now, with a little CSS this is very easy, but we also needed to allow visitors to pause, play and navigate the video when they moused over it. Thankfully, this is just as simple, and we’re going to show you how right here.

Step 1: The HTML.
Simply encase your desired video in the div that you will be working with. Ours is named “sizeit.”
<div id="sizeit">
<object type="application/x-shockwave-flash" width="425" height="355" data="http://www.youtube.com/v/bTRVq72gK04">
<param name="movie" value="http://www.youtube.com/v/bTRVq72gK04" /></object>
</div>


Step 2: The CSS.
#sizeit {width:425px /*this is the normal width of your video*/;height:325px /*this is ~30px less than the defined height of your video*/;overflow:hidden;}
#sizeit:hover{height:355px /*this is the normal height of your video*/;}

Step 3: Fix IE 6
Since IE 6 likes to break everything cool, it’s no surprise that it doesn’t like this method. But with the use of csshover.htc, we can get this working in no time.

Add this just before your </head> tag:
<!--[if IE]>
<style type="text/css"> body{behavior: url(csshover.htc);} </style>
<![endif]-->

Adjust the url() field as needed, then save this file to your site: csshover.htc

That’s it! IE 6 now at least acts like it knows what’s going on.

Here’s the end result.

Now that you have this working, it’s easy to style it to fit your look and feel. For example, you might want to make this video appear to play on a projector screen like we have done here:

Click here to see the full example page.

Compatibility:
This method has been tested in and is compatible with Internet Explorer 6 (with fix noted above), 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).

That’s all folks!
Have any thoughts about this article? Let us know through the comment field below. We’d also love to see where you’ve used our method or improved upon it, comment it below for a free link

Tags: css, Mouse Over Video, Navigation Bar, YouTube

This entry was posted on Thursday, February 19th, 2009 at 10:01 am and is filed under css. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.