Deixo aqui uma explicação do que está a acontecer no codePen que indicou. // selecionar o elemento do video var vid = document.getElementById('v0'); //var vid = $('#v0')[0]; // variante com jQuery // pausar o video ao inicio vid.pause(); // pausar o video ao detectar um scroll (para impedir auto-play) window.onscroll = function(){ vid.pause(); }; // procurar, a cada 40 milisegundos, o scroll atual da página e mostrar a frame com esse numero/400 setInterval(function(){ vid.currentTime = window.pageYOffset/400; }, 40); Se quiser mudar um pouco o código dê uma olhada a esta variante: ## Demo: http://jsfiddle.net/n3Lm6/ var vid = document.getElementById('v0'); vid.pause(); window.onscroll = function () { vid.currentTime = window.pageYOffset / 400; vid.pause(); }; document.getElementById('play').onclick = function () { vid.play(); } document.getElementById('pause').onclick = function () { vid.pause(); window.scrollTo(0, vid.currentTime * 400); // para colocar o scroll no sitio quando faz pause } Aqui juntei dentro do scroll a parte que estava com o setInterval e juntei um botão `play` e `pause` para exemplificar como pode controlar o video.