WordPress.org

Support

Support » How-To and Troubleshooting » Play video on hover.

Play video on hover.

  • Hello, I have been trying to figure this out for quite a while.

    I would like to add an image that plays a video when the mouse hovers, if you look at this link under section 5.3 you will see a perfect example of what I need: http://www.html5rocks.com/en/tutorials/video/basics/

    This will need to get this to work in my WordPress child theme.

    I have looked at other demos, but the above link has the only one that works.
    I also like that it has an HTML5 video fallback.

    I consider myself a novice when it comes to scripts so I may need some a little detail please.

    Any help will be very very very appreciated! Thank you and have a grand day!

Viewing 13 replies - 1 through 13 (of 13 total)
  • This is fairly simple with HTML5 video or a YouTube embed, but not for Flash.

    For a HTML5 video with jQuery loaded, you’d just need to have a JavaScript snippet along the lines of:

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

    Thank you very much for taking the time to help me Ben. 🙂

    I am pretty much new to world of java, where would I place the code you added?
    Just so you know I am using a twenty eleven child theme.

    Also how would I load jQuery or make sure it is on my site?

    Thank you very much and have a wonderful day! 🙂

    In your theme functions file (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 whichever template that displays the video paste:


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

    Hello Ben. thank you.

    In the second part of whichever template that displays the video, do you mean the page template like Default, Sidebar and Showcase. Right now I am using default.

    Again thank you very much 🙂

    Attaroa

    @attaroa

    Hi Dyson,

    I was wondering if you found a solution for this. I also want this same hover effect on my wordpress website, but I can’t figure out how to do it.

    Thanks very much for your reply!

    I was able to get it to work using Flowplayer.org Check out their forums it is in there that I got the answer 🙂

    Attaroa

    @attaroa

    Thanks! I’m going to take a look 🙂

    Attaroa

    @attaroa

    Thanks for your help, but I found a much easier solution.

    Just place this code in your page/post/widget where you want the mouseover video to be displayed:

    <video src="video.webm" id="id0" width="300" onMouseOver="id0.play()" onMouseOut="id0.pause()" onclick="window.location='video.webm';id0.pause()" loop title="video.webm
    " ></video>

    That is all? Sounds way too simple. 🙂 Let me try it out.

    Very cool. The only thing it needs is a video poster and a way to add HTML5 videos and it is rocking.

    I will try t figure that out, if you do let me know. Thank you ! 🙂

    Attaroa

    @attaroa

    I know, it’s much simpler than I thought.

    You can add a poster by adding poster=”image.jpg” to the tag.

    <video poster="image.jpg" src="video.webm" id="id0" width="300" onMouseOver="id0.play()" onMouseOut="id0.pause()" onclick="window.location='video.webm';id0.pause()" loop title="video.webm
    " ></video>

    If the uploader of WordPress does not support .webm, .ogg or .mp4 files (I haven’t checked that), you can always use a ftp program to upload the video’s.

    Here is another solution similar to yours, the only difference is that the code is called in with JS. so you do not need to replicate the code each time: http://www.dreamincode.net/forums/topic/281583-video-plays-on-mouse-over-but-not-with-multiple-videos/

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Play video on hover.’ is closed to new replies.
Skip to toolbar