Пропорции видеоблока без скачка раскладки
Место для видео можно зарезервировать заранее через aspect-ratio, чтобы поздняя загрузка не сдвигала соседний текст.
Назначение
Место для видео можно зарезервировать заранее через aspect-ratio, чтобы поздняя загрузка не сдвигала соседний текст.
Как это работает
Соотношение сторон задаёт связь ширины и высоты. Для собственного video используют controls и доступную альтернативу, а для внешнего iframe отдельно рассматривают название, приватность и разрешения.
Пример
<style>.video-placeholder{aspect-ratio:16/9;max-width:36rem;display:grid;place-items:center;background:#173c2e;color:white;padding:16px;box-sizing:border-box;text-align:center}</style>
<div class="video-placeholder">Место для учебного видео 16:9. Внешний плеер не загружается.</div>Что должно получиться
Заглушка сохраняет пропорции без сетевых обращений и заранее занимает место. Это пример раскладки, а не воспроизводимый видеофайл.
Граница применения и частая ошибка
Не включайте автоматическое воспроизведение со звуком и не встраивайте чужой плеер без оценки внешних запросов. Рамка правильной формы ещё не делает медиаматериал доступным.
Самостоятельная проверка
Поменяйте ширину контейнера и проверьте сохранение 16:9. В своём проекте замените заглушку настоящим видео с субтитрами и проверьте клавиатурное управление.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.