SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.

  3. #3
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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/li...61895#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!

  4. #4
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Zealot
    Join Date
    Nov 2012
    Posts
    117
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    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:

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

  6. #6
    Non-Member
    Join Date
    May 2012
    Posts
    14
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Jquery should do the trick. search for jquery plugins on jquery website / plugins


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •