CODEWITHSUNDEEP
javascriptjquerycssvideoyoutube
user3277125
user3277125

Reputation: 157

Youtube/vimeo/any Video thumbnail that plays on hover (no pop up)

I need to create youtube/vimeo/any video thumbnails that play On mouse Hover. Could somebody please teach me how to do this? I am guessing javascript, but have not got anywhere through research. I do not want a pop up, just simply for the video to remain the same size as the thumbnail and play.

I will have a page full of them in a 10x5 grid, in the end.

Thank you

Upvotes: 1

Views: 5647

Answers (1)

Dryden Long
Dryden Long

Reputation: 10190

Using mouseenter and mouseleave you can play/pause the video on hovering... Something like this should work:

Javascript

$("#video-holder").mouseenter(function(){
    document.getElementById('video1').play();
});
$("#video-holder").mouseleave(function(){
    document.getElementById('video1').pause();
});

HTML

<div id="video-holder">
    <video id="video1">
        <source src="..." type="video/ogg">
    </video>
</div>

http://jsfiddle.net/yD49P/

Upvotes: 2

Related Questions