[giwuf]

Всем привет!
Есть блок с фоновой картинкой, которая во время скроллинга плавно замещается в видеофон и после "отпускает" пользователя читать информацию далее.

На ноутбуке все отрабатывает хорошо, но на больших экранах ПК видео не успевает подгрузиться и первый экран скрывается из видимости раньше, чем человек успевает посмотреть видео.

Как сделать так, чтобы везде отрабатывало одинаково?

UPD: Сделал наглядный пример на демо сайте

Образец: фидл

var videoWrapper = document.querySelector('#h-intro');
var video = document.querySelector('#h-intro-video');
video.play();
var scrollCounter = 0;
window.addEventListener('wheel', function(e) {
  if (e.deltaY > 0) {
    scrollCounter++;
  } else {
    scrollCounter--;
    scrollCounter = scrollCounter < 0 ? 0 : scrollCounter;
  }
  if (scrollCounter <= 10) {
    e.preventDefault();
    var opacity = scrollCounter / 10;
    videoWrapper.style.opacity = opacity;
  }
}, false);

<header>
  <div id="h-header">
    <section id="h-intro" style="opacity: 0;">
      <video id="h-intro-video" src="https://www.w3schools.com/html/mov_bbb.mp4" loop="loop" muted=""></video>
    </section>
  </div>
</header>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est alias ipsam voluptatem impedit explicabo, dicta illo ipsa vitae odio harum eum tempore doloremque omnis doloribus repudiandae, suscipit saepe unde expedita.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est alias ipsam voluptatem impedit explicabo, dicta illo ipsa vitae odio harum eum tempore doloremque omnis doloribus repudiandae, suscipit saepe unde expedita.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est alias ipsam voluptatem impedit explicabo, dicta illo ipsa vitae odio harum eum tempore doloremque omnis doloribus repudiandae, suscipit saepe unde expedita.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est alias ipsam voluptatem impedit explicabo, dicta illo ipsa vitae odio harum eum tempore doloremque omnis doloribus repudiandae, suscipit saepe unde expedita.</p>
</div>

header {
  background: url("https://i.ytimg.com/vi/zf-GMvFd154/maxresdefault.jpg") no-repeat center center;
  background-size: auto;
  background-size: cover;
  min-height: 100vh;
  display: flex;
  align-items: center;
  color: white;
  position: relative;
  z-index: 1;
}

#h-header {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}

#h-intro {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  align-items: center;
  background: #212121;
  opacity: 0;
}

#h-intro-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  overflow: hidden;
}