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!
Naveen

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: http://www.istockphoto.com/search/lightbox/13261895#1309991d

There are other sites, such as www.pond5.com, 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…

Thanks,

Jerry

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', 'https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js');
wp_enqueue_script( 'jquery' );
}

In your template that displays the video paste:

$(document).ready(function() {
$("video").bind('mouseenter', function() {
$(this).play();
});
});

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