У меня имеется блок iframe с видеороликом внутри. В CSS были уже заданы параметры, такие как height (например, 720), max-width (например, 1280) и width:100%. Однако, при изменении размеров окна браузера ПК или ориентации экрана смартфона, корректно изменяется только ширина видео блока. Высота остается прежней.
Я попытался решить данный вопрос и написал скрипт, который каждые пол секунды менял бы высоту блока, в зависимости от его ширины, умножая эту самую ширину на число, которое в свое время уже было получено делением уже известных нам высоты на ширину.
Скрипт:
var ifr = document.getElementById('iFrame1');
var timerId = setTimeout(function tick() {
ifr.style.height = ifr.clientWidth * 0.5625 + 'px';
timerId = setTimeout(tick, 500);
}, 0);
Однако это не является грамотным решением, так как скрипт в основном будет в холостую выполнять свою операцию каждую половину секунды. Поэтому я интересуюсь, как переписать этот скрипт так, чтобы он срабатывал не по прошествии какого-то периода времени, а реагировал бы именно на изменение ширины окна браузера пользователем, ну, и также на смену ориентации устройства, если содержимое будет просматриваться на смартфоне (что, наверное, одно и тоже).
Ну, и мне также интересно на сколько сильной из-за этого может быть нагрузка на устройство. Возможно даже лучше будет, чтобы оставалась небольшая пауза в те же пол секунды, однако выполнение скрипта каждый раз просто так без нужды представляется явно лишнем.
Простой
Простой