Вертикальный скролл блокируется при наведении на видео

Критичность проблемы: Низкая | Сложность внедрения: Средняя | Встречаемость: Средняя

Листаю лендинг и натыкаюсь на видео. Курсор случайно заходит в плеер — и страница как будто жмёт на тормоз. Колесо крутится, палец двигается по тачпаду, а экран стоит. Живёт только плеер: шевелится полоска, вспыхивают подсказки, иногда прыгает громкость. Выношу курсор за рамку — скролл оживает. Возвращаюсь читать под видео — и снова ступор.

Это не единичный сбой. На страницах с несколькими блоками видео картина повторяется на каждом. Идёшь вниз, задеваешь плеер — замираешь. Ритм чтения рвётся, взгляд теряется, рука делает лишние движения. Я не смотрю ролики — мне нужно ниже, к тексту и кнопкам. Но интерфейс тянет меня в себя и удерживает.

На узких экранах хуже: шапка липнет сверху, баннер про куки снизу, места мало. Видео распухает до половины окна. Любая попытка прокрутить превращается в борьбу. Пока подвинешь курсор в безопасную зону, уже забыл, где остановился.

На тачпаде этот эффект особенно раздражает: ожидаешь плавный скролл, получаешь бетонную стену. Мышь — не лучше, просто короче шаги. В одном браузере плеер ловит колесо и крутит таймлайн, в другом — меняет громкость. В любом случае страница неподвижна. Если прокрутка в моменте не работает, ощущение одно: сайт сломан.

Хуже, когда видео стоит на пути к целевому действию. Я вижу заголовок, цепляюсь за смысл, хочу добраться до цены или формы. Между мной и кнопкой — ролик. Я не собираюсь его смотреть сейчас. Я просто хочу проскроллить. А меня не пускают.

Я замечаю, как начинаю избегать области плеера. Еду курсором по диагонали, делаю лишние траектории. Это мелочь, но она накапливается в раздражение. После пары таких стопов хочется закрыть вкладку. Не из-за темы, не из-за дизайна — из-за чувства, что сайт спорит со мной за управление.

Когда критично, а когда нет

Критично:

• Длинные лендинги с видео в первой трети страницы, перед ценой/формой/CTA.
• Продуктовые страницы e-commerce, где видео в галерее товара и ниже — характеристики и «Купить».
• Образовательные платформы, где под вводным видео — программа курса и кнопка оплаты.
• Медиа и блоги с врезками видео внутри статьи, особенно при множественных встраиваниях.
• Рекламный трафик с низким терпением пользователя и жёсткими KPI по конверсии.
• Небольшие экраны ноутбуков, липкие шапки/баннеры, когда видео занимает значимую часть вьюпорта.
• Десктопный трафик с тачпадами/колёсиком, где поведение колеса конфликтоопасно.

Не критично:

• Страницы, где цель — именно просмотр видео (кинотеатры, стриминги, промо-ролики).
• Короткие экраны без необходимости прокрутки поверх плеера (герой + CTA умещаются).
• Видео в модальном окне, которое перекрывает страницу и не стоит на пути к целевому действию.
• Внутренние кабинеты и B2B-сервисы с высокой мотивацией и низкой долей случайного трафика.
• Мобильный трафик с касаниями вместо ховера (проблема проявляется реже).
• Страницы, где видео находится внизу, и пользователь почти не проходит мимо него по пути к цели.

Что об этом говорят пользователи

Расскажите, что происходит со скроллом, когда вы пытаетесь пролистать страницу, наведя курсор/палец на область видео: на каком устройстве и в каком браузере тестировали, какие шаги делали, в какой момент прокрутка останавливается и чего вы ожидаете в этот момент?

Бесполезные ответы

• Не заметила ничего странного.
• Видео как видео, играет.
• Сайт в целом окей, дальше не смотрел.

Полезные ответы

• Листал страницу, подвёл курсор на YouTube‑видео — скролл перестал работать, колесо меняет громкость. Ожидаю, что страница продолжит листаться.
• Свайп вверх по видео не двигает страницу, нужно свайпать рядом. Мешает дочитать текст под видео.
• Видео в середине статьи. Если остановить плеер и навести на него, колёсико не листает. Уводишь курсор — снова работает. Потерял нить, пришлось искать место.
• Встраиваемый Vimeo. При попытке пролистать дальше задеваю видео, страница замирает. До CTA внизу дойти трудно.

Решение проблемы

• Сделайте скролл главным. Плеер не должен перехватывать колесо и свайпы, пока пользователь его не активировал.
• Уберите блокировку скролла в коде. Найдите обработчики wheel/mousewheel/touchmove, которые вызывают preventDefault. Удалите preventDefault или сделайте слушатели пассивными: { passive: true }.
• Проверьте обёртки вокруг плеера: там тоже не должно быть блокирующих обработчиков.
• Включайте плеер по клику. По умолчанию не давайте плееру ловить события указателя. После клика пользователь получает полноценное управление плеером.
• Отключите управление колёсиком в плеере. В настройках используемого плеера запретите изменение громкости/перемотку колёсиком. Удалите подключённые плагины «mousewheel».
• Проверьте стили контейнеров. Не ставьте overscroll-behavior: contain на блок с видео. Для мобильных задайте touch-action: pan-y, чтобы вертикальные свайпы уходили странице. Убедитесь, что вокруг нет невидимых перекрытий (overlay) с pointer-events: auto.
• Протестируйте связки.Windows/Chrome, macOS/Safari, iOS/Safari, Android/Chrome, webview мессенджеров. С включенным и выключенным автоплеем, с паузой, в фокусе и без.
• Зафиксируйте паттерн. «Видео не блокирует скролл до активации». Опишите это в гайдлайне фронтенда. Добавьте автотест: навели на видео — колесо скроллит страницу.

Гипотезы, как увеличить конверсии

• Если видео перестанет блокировать скролл до клика, то конверсия в переход к блоку с ценой может увеличиться за счёт того, что пользователи быстрее доходят до стоимости.
• Если включить плеер по клику и оставить скролл главным, то конверсия в просмотр следующего экрана может увеличиться за счёт того, что ритм чтения не ломается.
• Если убрать перехват колеса в области видео, то конверсия в отправку формы под видео может увеличиться за счёт сокращения лишних действий и раздражения.
• Если на мобильных вернуть вертикальные свайпы странице, то конверсия в нажатие основного CTA может увеличиться за счёт того, что путь по экрану становится предсказуемым.
• Если стандартизировать поведение всех видео на сайте, то конверсия в повторные визиты может увеличиться за счёт роста доверия к интерфейсу.