оригинальная версия версия для слабовидящих контрастная версия выключить изображения включить изображения RSS FEED K2 NEWS
Среда, 25 Июль 2018 15:12

Адаптивное видео в контент

Бывает, разработал сайт, всё в нём хорошо и дизайн всех устроил и в мобильной версии корректно отображается, и даже с браузерами беды нет, как вдруг, приходится вставить видео в контент. И вот тут то и начинаются беды у верстальщиков, поскольку видео-код предоставляется в «фиксированном» размере и здесь уже не угадаешь либо слишком маленькое на большом размере либо поплывший дизайн у мобильной версии.

Проблема решаема, тег iframe c видео добавляем в контейнер div, прописываем класс:

<div class="inf">
  <iframe width="560" height="315" src="/URL Вашего видео" frameborder="0" allowfullscreen>
</div>

А дальше мы переходим к стилям:

.inf{position:relative; padding-bottom:56.25%; padding-top:25px; height:0; }
.inf iframe {position:absolute; left:0; top:0; width:100%; height:100%;}

Процентные пропорции настраиваются в строке .inf iframe – ширина width и высота height.

Спонсоры: