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

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

Вы заходите на сайт, смотрите видео, хотите прокрутить страницу вниз — и тишина. Скролл замер, пока курсор над плеером.

Когда курсор наводится на видео, браузер передает управление плееру. Видео, особенно в iframe (YouTube, Vimeo), «перехватывает» скролл, и страница перестает реагировать. Это может быть из-за встроенного поведения плеера или ошибок в коде. Пользователь хочет листать дальше, а вместо этого застревает. Иногда помогает увести курсор, но это неудобно и портит впечатление.

Заблокированный скролл — удар по UX. Люди ценят свободу навигации. Если они не могут прокрутить страницу, то чувствуют себя загнанными в угол. Никому не нужен сайт, который раздражает.

Что говорят пользователи:

Какой у вас опыт взаимодействия с видео на сайте? Возникают ли сложности при попытке прокрутить страницу, когда курсор находится над видеоплеером?

• «Видео интересное, но я не могу прокрутить страницу, пока курсор над ним. Приходится уводить мышь в сторону, это раздражает.»
• «Когда смотрю видео, скролл зависает. Думал, сайт глючит. Приходится кликать в другое место, чтобы листать дальше.»
• «Плеер как будто «держит» страницу. Хочу прокрутить вниз, а ничего не работает, пока не уберу курсор с видео. Неудобно.»
• «Скролл тормозит, если навести на видео. На телефоне тоже не всегда срабатывает.»
• «Видео крутое, но почему нельзя просто прокрутить страницу? Приходится двигать мышку в сторону, это лишние движения.»

Рекомендуемое решение

1. CSS — первое оружие
Добавь pointer-events: none; для iframe с видео. Это отключит его интерактивность, и скролл страницы вернется. Если нужны кнопки плеера, включай pointer-events: auto; только для них через наложение div.

2. Атрибуты iframe
Укажи scrolling="no" в теге .

3. Кастомный плеер
Если используешь свой видеоплеер, проверь обработчики событий. Убедись, что event.preventDefault() не блокирует событие wheel.

4. API видеохостинга
Для YouTube или Vimeo используй их API. Например, YouTube позволяет отключить перехват событий через параметр disablekb=1 или настройку modestbranding. Читай документацию, там все есть.

5. Тестируй как пользователь
Открой сайт на ноутбуке, телефоне, планшете. Прокрути страницу, наведи на видео, попробуй все комбинации. Лови баги до того, как их найдут пользователи.

Сделай эти шаги и проверь сайт еще раз. Попроси коллег или друзей пройтись по странице и прокрутить ее с включенным видео. Если скролл течет плавно, ты молодец. Если нет — вернись к шагам и проверь код.

Гипотезы роста конверсии

1. Если отключить перехват событий мыши в видеоплеере через CSS (pointer-events: none), то конверсия в покупки вырастет на 5–10%, за счет того, что пользователи смогут свободно листать страницу, не тратя нервы на борьбу с плеером.
2. Если добавить параметр scrolling="no" в iframe видео, то конверсия в регистрации увеличится на 3–7%, за счет того, что внутренний скролл плеера перестанет блокировать страницу, и пользователи дойдут до формы без лишних препятствий.
3. Если использовать API видеохостинга (YouTube, Vimeo) с отключением интерактивных элементов плеера, то конверсия в заполнение форм вырастет на 4–8%, за счет того, что видео не будет мешать движению по странице, а пользователи сосредоточатся на контенте и призыве к действию.
4. Если заменить встроенный плеер на кастомный с контролем событий wheel, то конверсия в клики по кнопке «Купить» вырастет на 6–12%, за счет того, что скролл станет плавным, а пользователи перестанут закрывать сайт из-за раздражающих глюков.
5. Если тестировать сайт с включенным видео на разных устройствах и устранить все баги скролла, то конверсия в подписку на рассылку увеличится на 5–15%, за счет того, что пользователи получат гладкий опыт без сбоев, что повысит их доверие и вовлеченность.

Заблокированный скролл — мелочь, которая отпугивает пользователей. Исправьте код, протестируйте сайт и верните людям свободу навигации. Ваш сайт станет удобнее, а конверсия вырастет.