Pass the mouse over the image and get a video

[jdrc12]

I’m tried to show a video when you pass the mouse over a image but i failed so many times, i got the code form this page (http://www.htmlgoodies.com/beyond/javascript/article.php/3470881) and i tried to modify but there is no result for me.

I use this video (http://gfycat.com/ShockingDependableHogget) that is from the “gfy” page that converts gifs into videos and load very fast. This is the code:

<video id=”gfyVid1″ class=”gfyVid” width=”646″ height=”326″ autoplay=”” loop=”” muted=”muted” style=”display: block;”>

        <source id="webmsource" src="//fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
        <source id="mp4source" src="//zippy.gfycat.com/ShockingDependableHogget.mp4" type="video/mp4">

    </video>

if you can help me i will be very grateful because i don’t have much experience on javascript and css… and sorry for my english… Thank you for reading.

[Paulie_D]

A demo in Codepen would be useful.

[jdrc12]

Ok Paulie_D, this is what i have: http://codepen.io/anon/pen/jEWwdx

I want that when you pass the mouse over the players face you can get the video instead of the picture 1, 2 or 3.

[jdrc12]

Thank you for answer me, i know how to put the gifs, the problem is that are so slow to load that is a problem for my page, the video is the fastest thing that i can find to put… you know some example that i can use for that script? is very complicated?…

[jdrc12]

Thank you so much, you are a really good person!!!

[Author]

Posts