Очень часто приходится на сайтах вставлять видео, расположенные на популярном видеохостинге Youtube. Делается это очень просто — получаем код на ютубе и вставляем его в код сайта. Да вот незадача — на мобильных такие видео чаще всего не вписываются в ширину экрана и дизайн сайта нарушается.
Если попытаться задать ширину iframe с видео в процентах, то ничего особо хорошего из этого не выйдет — ширину таким образом можно назначить, а вот с высотой это не пройдет. Поэтому высоту iframe приходится задавать в абсолютных еденицах.
Можно, кончено, ширину и высоту iframe вынести в файл стилей css и через медиа запросы менять эти значения в зависимости от размера экрана пользователя.
Есть еще один вариант, позволяющий сделать видео с ютуба (Youtube) адаптивным, который мне лично очень нравится. Он позволяет пропорционально изменять размеры видео в iframe с изменением размеров экрана или ширины окна браузера. Код приведен ниже
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"> <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.youtube.com/embed/video_ID" width="auto" height="auto" frameborder="0" allowfullscreen="allowfullscreen"></iframe> </div>