<div id="set-height"></div>
<div class="gradient"></div>
<video id="v0" tabindex="0" autobuffer="autobuffer" preload="preload">
<source type="video/mp4; codecs=" avc1.42E01E, mp4a.40.2"" src="http://files.yuliyaigoshina.ru/%D0%A2%D0%95%D0%A1%D0%A2/%D0%A0%D0%90%D0%9B%D0%9B%D0%98%20%D0%94%D0%90%D0%9A%D0%90%D0%A0%20-%20%D0%9B%D0%A3%D0%A7%D0%A8%D0%98%D0%95%20%D0%9C%D0%9E%D0%9C%D0%95%D0%9D%D0%A2%D0%AB%20%D0%A1%20%D0%A0%D0%90%D0%9B%D0%9B%D0%98%20%D0%94%D0%90%D0%9A%D0%90%D0%A0%202017%20%5B%D0%9A%D0%90%D0%9C%D0%90%D0%97%20-%20%D0%9C%D0%90%D0%A1%D0%A2%D0%95%D0%A0%20%D0%9A%D0%9B%D0%98%D0%9F%5D%20(convert-video-online.com).mp4"></source>
</video>
<script>
// Выбираем видео элемент
var vid = $('#v0')[0]; // jquery опция
// остановка видео при загрузке
vid.pause();
// Пошаговое воспроизведение видео при прокрутке страницы
window.onscroll = function() {
vid.pause();
};
// Обновления видеокадров для плавного воспроизведения при прокрутке
setInterval(function() {
vid.currentTime = window.pageYOffset/400;
}, 10);
</script>
<style>
#set-height {
display: block;
height: 1000px;
}
#v0 {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: -2;
}
.gradient {
background-image: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0.4));
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
position: fixed;
z-index: -1;
}
</style>