Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Scroll to play video using jquery
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Scroll untuk play video |</title>
<script src="//"></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) {
padding: 0;margin: 0;
html {
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;
color: white;
<h1>Scroll to play video &#9658;</h1>
<video id="video" src=""></video>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.