Как выравнять iframe по всей ширине блока

Пример кода, который позволяет выравнять iframe пропорционально по ширине и высоте.

К примеру, мы хотим вставить iframe с ютуб. Стандартный код вставки имеет фиксированную ширину и высоту. Пример:

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

Поэтому меняем код, делаем его универсальным, под разную ширину сайта:

Стили:

.iframe_block{
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.youtube{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.iframe_block{

position: relative;

width: 100%;

height: 0;

padding-bottom: 56.25%;

}

.youtube{

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

Пример вставки. Можете проверить, уменьшите размер окна браузера, и сами всё увидите.