Top.Mail.Ru

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

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

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

<iframe width="560" height="315" src="https://www.youtube.com/embed/5zfptPe2Q7s" frameborder="0" allowfullscreen></iframe>

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

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

<div class="iframe_block"><iframe class="youtube" src="https://www.youtube.com/embed/5zfptPe2Q7s" frameborder="0" allowfullscreen></iframe></div> 

Стили:

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

Телеграм канал
XIAOMI & AliExpress
Интересные товары с АлиЭкспресс. Купоны и скидки. Товары фирмы XIAOMI

Оценить статью
(Пока оценок нет)

Добавить комментарий

Войти с помощью: