How to embed video in rollover state

Hi folks,

What exactly is the technique to have an embedded video play on a mouseover/rollover of an image? Examples would be on this page, in which rollover the thumbnail images causes a window to appear playing a piece of video.

I’m a designer who is very rusty and not up to date on web design (I moved over into design in tv/film). However, I used to hand code and still touch html every now and then, though not much javascript or php. If someone could at least point me in the right direction, then I can determine if this is something I can handle or if I need to bring in a web pro.

Thanks much!

Hi Naveen. Hover/rollover is probably not the best way to do here. Consider all the touch screens/mobiles etc. that don’t really have hovering. A better approach would be to take the user to a new page to view the video if they click the image, and then to enhance this effect with JS such that, instead of being taken to a new page, the video pops up over the page in a modal window. That’s very common, and there are lots of free scripts out there for this sort of thing. For example, there’s PrettyPhoto.

Hi Ralph. Thanks for the reply!

I do intend to have the user be taken to another page with the video once they click on the image.

However, I very much want to have the video playing in a box during the hover state. I’m helping to build a small stock footage site, and for better or for worse, this is the standard for those kinds of sites. For example, see here:

There are other sites, such as, where you will see the same result. Hovering over the image will produce a small box showing the video. It’s actually the best way to preview video when searching through a lot of files, so I very much feel we need it on the site I’m designing.

Any help achieving this result is greatly appreciated! Thanks again!

Hi Naveenmedia,

I understand the concern about tablets, etc. (which can be handled by testing and using other approaches) but I’m curious if you ever found a solution to “embedded video play on a mouseover/rollover of an image” that you’d be willing to share…



If you are using wordpress, you could try this (with jquery), should work with HTML5 and youtube embed videos:

In theme functions.php, paste this:

add_action('wp_enqueue_scripts', 'jquery_method');
function jquery_method() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', '');
wp_enqueue_script( 'jquery' );

In your template that displays the video paste:

$(document).ready(function() {
$("video").bind('mouseenter', function() {

Jquery should do the trick. search for jquery plugins on jquery website / plugins