Skip to content

Instantly share code, notes, and snippets.

@tutweb

tutweb/scroll-play-video.html

Created September 6, 2014 06:29
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save tutweb/20c1369e0617cf6ba337 to your computer and use it in GitHub Desktop.
Save tutweb/20c1369e0617cf6ba337 to your computer and use it in GitHub Desktop.
Download ZIP
Scroll to play video using jquery
Raw
scroll-play-video.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scroll untuk play video | Tutorial-Webdesign.com</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
function scrollVideo() {
var video = $('#video').get(0),
videoLength = video.duration,
scrollPosition = $(document).scrollTop();
video.currentTime = (scrollPosition / ($(document).height() - $(window).height())) * videoLength;
}
$(window).scroll(function(e) {
scrollVideo();
});
</script>
<style>
*{
padding: 0;margin: 0;
}
html {
height:100%;
}
body {
height: 4000px;
}
video {
position: fixed;
left: 50%;
top: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-size: cover;
-moz-transform: translateX(-50%);
transform: translateX(-50%);
}
h1 {
position: fixed;
top: 50%;
left: 50%;
width: 100%;
-moz-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index: 99;
font-family: HelveticaNeue, Helvetica, sans-serif;
font-size:8vmin;
text-align:center;
color: white;
}
</style>
</head>
<body>
<h1>Scroll to play video &#9658;</h1>
<video id="video" src="http://vjs.zencdn.net/v/oceans.mp4"></video>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment