-
-
Save jenninexus/d544dc43cc5fef1f13b12168f252c7f8 to your computer and use it in GitHub Desktop.
Hover to play video
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Love this but I'm a noob and trying to figure out how to place the video precisely where the image is.. this works but the video appears to the right of the image. Any words of wisdom to help me get past the noob stage a bit? Thank you :-)