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

25 февраля, 2024
| CSS / HTML

Полученный код Youtube вставки формируется в теге iframe с фиксированной шириной и высотой фрейма. Поэтому возникают трудности для адаптации блока с видео под разные размеры экрана.

Сделать видео адаптивного размера можно обвернув iframe внешним дивом с определёнными CSS-стилями.

Пример адаптивного тега iframe на CSS

<div class="iframe_conteyner">
    <iframe width="100%" height="480" src="https://www.youtube.com/embed/..."></iframe>
</div>

.iframe_conteyner {
    height: 0px;
    padding-bottom: 56.2%;
    position: relative;
}
.iframe_conteyner iframe {
    width: 100%;
    height: 100%;
    position: absolute;
}

Пример адаптивного тега iframe на JQuery

$(document).ready(function(){
    $('iframe[src*="youtu"]').each(function(){
        $(this).wrap('<div class="iframe_conteyner"></div>');
    });
});