Как сверстать адаптивный блок с видео: пошаговое руководство

Задача - создать резиновый и адаптивный блок, в котором видео проигрывается как единое целое, без использования сторонних библиотек или CSS-фреймворков. Ниже разберём решение на чистом CSS и JavaScript, которое подойдёт для любого разрешения экрана.

Почему важна резиновая и адаптивная верстка

Современные сайты открывают на устройствах с разной шириной экрана - от смартфонов до широкоформатных мониторов. Резиновая верстка (на относительных единицах) позволяет элементам подстраиваться под размер окна, а адаптивная - менять структуру при определённых точках перелома (breakpoints). Для видео это критично: плеер не должен обрезаться или вылезать за границы контейнера.

Базовая структура HTML для видео

Используем нативный HTML5-тег <video>. Обернём его в контейнер, который будет управлять размерами.

<div class=\"video-wrapper\">\n  <video class=\"video-player\" controls preload=\"metadata\">\n    <source src=\"example.mp4\" type=\"video/mp4\">\n  </video>\n</div>

CSS: резиновость без фреймворков

Главный секрет - использовать max-width: 100% и относительные единицы. Для сохранения пропорций видео часто применяют padding-bottom, но современный способ - свойство aspect-ratio.

.video-wrapper {\n  width: 100%;\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n.video-player {\n  display: block;\n  width: 100%;\n  height: auto;\n  aspect-ratio: 16 / 9;\n  object-fit: cover;\n}

Если нужно поддерживать старые браузеры, добавьте классический трюк с padding-bottom: 56.25% (для 16:9) и абсолютным позиционированием видео.

Адаптивность через медиазапросы

Для разных разрешений можно менять размер шрифтов, отступы или даже соотношение сторон. Пример для мобильных устройств:

@media (max-width: 768px) {\n  .video-wrapper {\n    max-width: 100%;\n    padding: 0 10px;\n  }\n  .video-player {\n    aspect-ratio: 4 / 3;\n  }\n}

JavaScript: контроль воспроизведения

Чтобы видео проигрывалось как единое целое (без случайных кусочков), убедитесь, что плеер не перезагружается при ресайзе окна. Добавьте обработчик, который приостанавливает видео только по явному действию пользователя, а не при изменении размеров.

const video = document.querySelector('.video-player');\n\n// Запрещаем авто-паузу при ресайзе\nwindow.addEventListener('resize', function() {\n  if (!video.paused) {\n    video.play();\n  }\n});\n\n// Дополнительно: плавный скролл к видео, если нужно\ndocument.querySelector('.video-wrapper').scrollIntoView({ behavior: 'smooth' });

Проверка на разных устройствах

После верстки обязательно протестируйте блок в инструментах разработчика (Chrome DevTools, режим эмуляции мобильных устройств). Убедитесь, что:

• видео не выходит за границы контейнера;
• кнопки управления плеером остаются кликабельными;
• при повороте экрана пропорции сохраняются.

Типичные ошибки и их решение

Ошибка: видео обрезается по краям. Решение: проверьте object-fit: cover - возможно, нужно заменить на contain, чтобы было видно всё содержимое.

Ошибка: плеер прыгает при загрузке страницы. Решение: задайте контейнеру фиксированное соотношение сторон через aspect-ratio или padding-bottom.

Ошибка: на мобильных видео не реагирует на касания. Решение: добавьте атрибут playsinline к тегу video и обработайте событие touchstart.

Заключение

Резиновый адаптивный блок с видео можно сделать на чистом CSS и паре строк JS. Главное - использовать относительные единицы, задать пропорции плеера и не допускать перезагрузки видео при ресайзе. Такой подход полностью соответствует требованиям тестового задания и не требует библиотек.