Как сделать превращение фоновой картинки в видеофон на всех устройства одинаковым?

Question

[ligisayan]

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

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

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

UPD: Пример на демо-сайте меня не очень утраивает, что прокрутка начинается прямо со старта, а не происходит с задержкой после появления видеофона. e.preventDefault(); на событии scroll не работает и как я уже писал выше: хочу добиться кроссбраузерного варианта хотя бы с поддержкой ie10+

Образец:

Answer 1

[lGHOSTl]

Можно попробовать начинать скролить по событию playing.
Тут все возможные события, которые срабатывают на медиа тегах (audio, video)

Comments

[ligisayan]

lGHOSTl идея интересная, но не совсем понятно как вы предлагаете это реализовать, чтобы вначале скролл как бы застывал, а затем пошло движение по событию.
Добавил демонстрацию проблемы на демо-сайте