Как сделать iframe адаптивным

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

Растяните iframe на всю ширину и задайте пропорции через aspect-ratio — высота подстроится сама:

<iframe src="https://example.com" title="Example Domain" style="width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; background: whitesmoke;"></iframe>

Для видео обычно нужны пропорции 16 / 9, для карты — 4 / 3 или квадрат.

Ограничить ширину

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

<iframe src="https://example.com" title="Example Domain" style="display: block; width: 100%; max-width: 400px; height: auto; aspect-ratio: 16 / 9; margin: 0 auto; border: 1px solid silver;"></iframe>

Старый способ

До появления aspect-ratio пропорции держали обёрткой с padding-top: 56.25% (это 9 / 16) и абсолютно позиционированным iframe внутри. Такой код ещё часто встречается, но в новых проектах достаточно одной строки с aspect-ratio.

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

Сервис дал код встраивания с атрибутами width="560" height="315", а в CSS ставят только width: 100%. Ширина меняется, а высота из атрибута остаётся прежней — на телефоне плеер становится узкой высокой полосой. Добавьте height: auto и aspect-ratio.