Skip to content

Instantly share code, notes, and snippets.

@adamloving

adamloving/hover-video.html

Created March 22, 2016 23:01
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save adamloving/ee4d980e3de2fc125207 to your computer and use it in GitHub Desktop.
Save adamloving/ee4d980e3de2fc125207 to your computer and use it in GitHub Desktop.
Download ZIP
Hover to play video
Raw
hover-video.html
<html>
<head>
<style>
.viewport {
position: relative;
width: 300px;
height: 300px;
}
.viewport:hover img {
opacity: 0;
}
.viewport:hover video {
opacity: 1;
}
img {
height: 100%;
width: 100%;
opacity: 1;
border-radius: 50%;
}
.fade {
transition: opacity .5s ease-in-out;
}
video {
height: 300px;
width: 300px;
border-radius: 150px;
position: absolute;
top: 0px;
opacity: 0;
}
</style>
</head>
<body>
<div class="viewport">
<img class="fade" src="https://media-cdn.tripadvisor.com/media/photo-s/01/d6/68/97/mt-rainier-natl-park.jpg">
<video id="video" class="fade">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<!--
<div class="mask">hi</div>
-->
</div>
<script>
var viewport = document.getElementsByClassName('viewport')[0]
var video = document.getElementById('video')
viewport.addEventListener('mouseover', function() { video.play() }, false);
viewport.addEventListener('mouseout', function() { video.pause() }, false);
</script>
</body>
</html>
@silasbuchwald
Copy link

silasbuchwald commented Mar 29, 2018 •
edited

Great!

For more than one pictures use this one:

var vid = document.getElementsByTagName("video");
[].forEach.call(vid, function (item) {
item.addEventListener('mouseover', hoverVideo, false);
item.addEventListener('mouseout', hideVideo, false); });

function hoverVideo(e){
this.play();
}
function hideVideo(e){
this.pause();
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment