Как сделать адаптивное видео

Короткий ответ

Для тега video достаточно ширины 100% и автоматической высоты:

<video src="/media/flower.webm" controls style="width: 100%; height: auto;"></video>

Браузер знает пропорции файла и сам считает высоту.

Встроенный плеер

У iframe с видео с другого сайта пропорций нет, и высота остаётся 150px. Задайте их через aspect-ratio:

<iframe src="https://example.com" title="Video" style="width: 100%; aspect-ratio: 16 / 9; border: 0;"></iframe>

Блок шириной во всю колонку получает высоту ровно 9/16 от ширины. Для вертикальных роликов пишите 9 / 16.

Ограничить размер

На широком экране видео во всю ширину бывает слишком большим. Ограничьте его через max-width и отцентрируйте:

<video src="/media/flower.webm" controls style="display: block; width: 100%; max-width: 320px; margin: 0 auto;"></video>

Частая ошибка

Старый приём с обёрткой и padding-top: 56.25% до сих пор встречается в статьях. Он работает, но требует лишний элемент и абсолютное позиционирование. Сегодня aspect-ratio поддерживают все браузеры, так что он больше не нужен.