HTML5 Video Play on Hover

Developer
Gil
Size
2,219 Kb
Views
8,096
  1. HTML5 Video Play on Hover Previews
  2. HTML5 Video Play on Hover HTML Codes
  3. HTML5 Video Play on Hover CSS Codes
  4. HTML5 Video Play on Hover JS Codes

How do I make an html5 video play on hover?

Play an HTML5 Video on hover using gifycat.Combine with Video url (vimeo/youtube) to grab thumbnail. What is a html5 video play on hover? How do you make a html5 video play on hover? This script and codes were developed by Gil on 28 September 2022, Wednesday.

HTML5 Video Play on Hover Previews
IQ Test

HTML5 Video Play on Hover - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>HTML5 Video Play on Hover</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--
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> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

HTML5 Video Play on Hover - Script Codes CSS Codes

#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;
}

HTML5 Video Play on Hover - Script Codes JS Codes

var figure = $(".video").hover( hoverVideo, hideVideo );
function hoverVideo(e) { $('video', this).get(0).play();
}
function hideVideo(e) { $('video', this).get(0).pause();
}
HTML5 Video Play on Hover - Script Codes
HTML5 Video Play on Hover - Script Codes
Home Page Home
Developer Gil
Username gil--
Uploaded September 28, 2022
Rating 4.5
Size 2,219 Kb
Views 8,096
Do you need developer help for HTML5 Video Play on Hover?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Gil (gil--) Script Codes
Name
Horizontal Scroll Textarea
SVG SMIL Circular Spinner Animation
HTML5 Input
Pitchfork Link Underline
Animated Music Jukebox
Parallax Background
Cross Hands Animated Emoji
Animated Money Emoji with CSS
A Pen by Gil
CSS Snackables - Week 1
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!