Play an HTML5 Video on hover using gifycat.
Combine with Video url (vimeo/youtube) to grab thumbnail
A Pen by Andrea Perazzi on CodePen.
Play an HTML5 Video on hover using gifycat.
Combine with Video url (vimeo/youtube) to grab thumbnail
A Pen by Andrea Perazzi on CodePen.
<!-- | |
Data: https://gfycat.com/cajax/get/VerifiableTerrificHind | |
Source: https://www.youtube.com/watch?v=nZcejtAwxz4 | |
More info on youtube api for thumbnails: http://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api | |
--> | |
<div id="videosList"> | |
<div class="video"> | |
<video class="thevideo" loop preload="none"> | |
<source src="https://giant.gfycat.com/VerifiableTerrificHind.mp4" type="video/mp4"> | |
<source src="https://giant.gfycat.com/VerifiableTerrificHind.webm" type="video/webm"> | |
Your browser does not support the video tag. | |
</video> | |
</div> | |
Hover mouse over video. Desktop only [ Obviously! ;) ] | |
</div> |
var cip = $(".video").hover( hoverVideo, hideVideo ); | |
function hoverVideo(e) { | |
$('video', this).get(0).play(); | |
} | |
function hideVideo(e) { | |
$('video', this).get(0).pause(); | |
} |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
#videosList { | |
max-width: 600px; | |
overflow: hidden; | |
} | |
.video { | |
background-image: url('https://img.youtube.com/vi/nZcejtAwxz4/maxresdefault.jpg'); | |
height: 330px; | |
width: 600px; | |
margin-bottom: 50px; | |
} | |
/* Hide Play button + controls on iOS */ | |
video::-webkit-media-controls { | |
display:none !important; | |
} |