Автоматическая адаптация <iframe> на сайте

Когда мы размещаем видео с YouTube на своей странице, то сталкиваемся с тем, что YouTube всегда задаёт нам фиксированные размеры видео, указывая их в атрибутах width и height. А если мы хотим, чтобы видео было адаптивным? Чтобы оно всегда было на всю ширину родительского контейнера на всех типах устройств? Тогда нам приходится либо писать кучу стилей, либо мириться с тем, что на больших экранах видео занимает меньшую часть контейнера, а на мобильных устройствах вообще не влазит...

Я написал скрипт, Вы можете использовать его у себя на сайте.

Итак, автоматическая адаптация iframes на страницах сайта

Вначале, для каждого элемента iframe присваиваем класс iframeAdaptive.

Пример:

<iframe class="iframeAdaptive" width="560" height="315" src="https://www.youtube.com/embed/4LYl3PgDKx8?rel=0" frameborder="0"></iframe>

Важно: имеющиеся ширину и высоту в атрибутах обязательно оставляем, скрипт будет по ним считать пропорции.

Далее, вставляем скрипт на нашу страницу:

<script>
document.addEventListener("DOMContentLoaded", function() { // используем событие загрузки страницы, не включая картинки и прочее
    let iframes = document.querySelectorAll('.iframeAdaptive');
    iframes.forEach(function(i) { // перебираем имеющиеся Iframe с присвоенным нами классом
        let iframeWidth = i.width; // берём из атрибута width ширину
        let iframeHeight = i.height; // берём из атрибута height высоту
        let iframeParent = i.parentNode; // определяем родительский элемент нашего Iframe
        let parentWidth = parseInt(getComputedStyle(iframeParent)['width'])-parseInt(getComputedStyle(iframeParent)['padding-left'])-parseInt(getComputedStyle(iframeParent)['padding-right']); // берём родительский контейнер и высчитываем нужную нам ширину, без учёта padding, margin и border
        let iframeProportion = parentWidth / iframeWidth;
        i.setAttribute('width', parentWidth); // устанавливаем ширину нашим Iframe
        i.setAttribute('height', iframeHeight * iframeProportion); // устанавливаем высоту нашим Iframe
    });
});
</script>

Никаких дополнительных библиотек (jQuery и проч.) для работы скрипта не требуется.