Как создать адаптивное видео, которое не «прыгает» при загрузке

Верстка дергается, метрики плачут: решаем проблему прыгающего видео

Присаживайся, наливай кофе. Сегодня разберем одну классическую боль, которая до сих пор ломает нервную систему пользователям и портит нам показатели Core Web Vitals (а именно CLS — Cumulative Layout Shift).

Представь картину: пользователь заходит на сайт, начинает читать статью, уже тянется тапнуть по кнопке, и тут — бам! Сверху загружается тяжелое видео, весь контент резко прыгает вниз, а юзер промахивается и кликает на рекламу или вообще закрывает вкладку в бешенстве. Знакомо? Эта проблема стара как мир, но в 2026 году у нас есть все инструменты, чтобы решить её раз и навсегда — элегантно, без костылей и тонны лишнего кода.

Как мы страдали раньше: эпоха padding-bottom хаков

До того как современные браузеры научились нормально работать с пропорциями, верстальщикам приходилось изобретать велосипеды. Самым популярным решением был так называемый padding-bottom хак (или «соотношение сторон по-дядюшке Тьерри»).

Мы оборачивали видео в специальный контейнер-обертку, задавали ему относительное позиционирование, обнуляли высоту и выжимали нужные пропорции через процентный padding. Для классического формата 16:9 это выглядело примерно так:

• Контейнеру задавали position: relative, height: 0 и padding-bottom: 56.25% (потому что 9 делить на 16 и умножить на 100 — это ровно 56.25%).
• Самому видео или iframe ставили position: absolute, растягивали на 100% ширины и высоты и прижимали к левому верхнему углу.

Это работало? Да. Было ли это красивым и интуитивным решением? Абсолютно нет. Разметка перегружалась лишними div-обертками, а если завтра дизайнер просил поменять формат видео на вертикальный 9:16, приходилось пересчитывать проценты и переписывать стили. Мы извращались как могли, пока не появились современные инструменты. Кстати, если хочешь углубиться в тему адаптива и сложных интерфейсов без лишней боли, почитай про математические функции в CSS (clamp, min, max) — они отлично дополняют современные подходы к адаптивной верстке.

Как делать правильно в 2026 году: современный, элегантный подход

Сегодня весь этот ад с абсолютным позиционированием и вычислением процентов в уме можно смело отправить на свалку истории. В современных браузерах правит бал свойство aspect-ratio.

Идея проста: мы явно говорим браузеру, какие пропорции будут у медиафайла, еще до того, как он начнет загружаться. Браузер мгновенно резервирует виртуальный прямоугольник нужного размера на странице. Контент под этим прямоугольником сразу встает на свои места и больше никуда не дергается.

Для идеального результата мы комбинируем три вещи:

• Атрибуты width и height в самом HTML (это дает браузеру базовую информацию о пропорциях еще до загрузки CSS).
• Свойство aspect-ratio в CSS, которое жестко фиксирует соотношение сторон при изменении ширины экрана.
• Свойство object-fit: cover, которое гарантирует, что видео аккуратно заполнит выделенную область без искажений и черных полос по бокам. Для видео оно работает точно так же безупречно, как и для картинок — об этом я детально писал в статье про секреты свойства object-fit для идеальных изображений в сетке.

Готовый сниппет для идеального видео

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

<!-- HTML -->
<video 
  class="responsive-video" 
  width="1920" 
  height="1080" 
  preload="metadata" 
  poster="poster-placeholder.jpg" 
  controls>
  <source src="promo-video.mp4" type="video/mp4">
  Ваш браузер не поддерживает тег video.
</video>

<style>
  .responsive-video {
    display: block;
    width: 100%;
    max-width: 1200px; /* Ограничиваем максимальную ширину плеера */
    height: auto;
    aspect-ratio: 16 / 9; /* Браузер мгновенно резервирует место */
    object-fit: cover; /* Видео красиво вписывается в контейнер */
    background-color: #121212; /* Темный фон-заглушка на время загрузки */
    border-radius: 8px;
  }
</style>

Частая ошибка новичков

Самый частый фейл, который я вижу на код-ревью у мидлов — это написание классической связки width: 100%; height: auto; без указания aspect-ratio и без HTML-атрибутов высоты и ширины.

Что происходит в этот момент под капотом браузера? Он видит тег video, понимает, что ширина должна быть 100%, но высоту рассчитать не может, пока не скачает первые метаданные видеофайла. В итоге до начала загрузки высота контейнера равна 0 пикселей. Как только метаданные прилетают по сети, высота резко прыгает со значения 0 до условных 450px. Вся страница со свистом летит вниз.

Запомни: всегда указывай либо aspect-ratio в CSS, либо атрибуты width и height непосредственно на теге. А лучше — используй их вместе, как в моем примере выше. Это застрахует твой интерфейс от дерганий, даже если CSS-файл по какой-то причине загрузится с задержкой.

🔥 Больше фишек, готовых сниппетов и передовых подходов к CSS мы публикуем в нашем Telegram-канале. Подписывайтесь, чтобы не пропустить!