Для того чтобы установить высоту iframe, которая будет соответствовать соотношению сторон 16:9, можно использовать CSS. Вот несколько подходов, которые вы можете использовать.
1. Использование CSS-свойства 'padding-bottom':
<div style="position: relative; width: 100%; padding-bottom: 56.25%;">
<iframe src="YOUR_URL_HERE" frameborder="0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
</div>
В этом примере мы используем блочный элемент div с CSS-свойствами 'position: relative' и 'padding-bottom: 56.25%'. Значение 56.25% соответствует соотношению 16:9. Внутри этого блока размещается iframe, он занимает всю доступную площадь блока, используя CSS-свойства 'position: absolute', 'top: 0', 'left: 0', 'width: 100%' и 'height: 100%'.
2. Использование CSS-свойства 'width' и 'height':
<iframe src="YOUR_URL_HERE" frameborder="0" style="width: 100%; height: calc(100vw * 9 / 16);"></iframe>
В этом примере мы используем CSS-свойство 'width: 100%' для обеспечения полной ширины iframe. CSS-свойство 'height' устанавливается равным значению, рассчитанному с помощью выражения 'calc(100vw * 9 / 16)'. Здесь '100vw' означает 100% ширины видимой области окна браузера, а выражение '9 / 16' представляет соотношение сторон 16:9.
3. Использование JavaScript:
<div id="wrapper"></div>
<script>
var wrapper = document.getElementById("wrapper");
var iframe = document.createElement("iframe");
iframe.src = "YOUR_URL_HERE";
iframe.frameborder = 0;
iframe.style.width = "100%";
iframe.style.height = (iframe.offsetWidth * 9 / 16) + "px";
wrapper.appendChild(iframe);
</script>
Альтернативный подход заключается в использовании JavaScript для установки высоты iframe. В этом примере мы создаем блочный элемент div с идентификатором "wrapper". Затем, с помощью JavaScript, мы создаем iframe, устанавливаем его ширину на 100% и высоту с использованием выражения '(iframe.offsetWidth * 9 / 16) + "px"'. Здесь 'iframe.offsetWidth' означает ширину блока-обертки "wrapper", а выражение '9 / 16' представляет соотношение сторон 16:9. Наконец, мы добавляем iframe в блок-обертку "wrapper".
Независимо от выбранного подхода, высота iframe будет автоматически рассчитана и настроена на соотношение сторон 16:9, обеспечивая правильное отображение.