<div id="set-height"></div>
<div class="gradient"></div>
<video id="v0" tabindex="0" autobuffer="autobuffer" preload="preload">
    <source type="video/mp4; codecs=&quot; avc1.42E01E, mp4a.40.2&quot;" 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>