Здравствуйте, уважаемые читатели XoZbloga! Когда говорят об адаптивной верстке, то подразумевают шаблон, который подстраивается под любое разрешение экрана. Элементам контейнерам div присваивается относительная ширина, правильное позиционирование и тд. Но также не следует забывать о содержимом этих контейнеров. Да, текст подстроиться по ширине автоматически, но как же быть с изображениями, видео и аудио элементами на странице. Ведь если где-то, что-то вылезает за пределы или торчит не в том месте — это не совсем хорошо. В этой статье разберемся, как же поступить с медиа элементами используя адаптивную верстку при создании сайтов.
Адаптивные изображения
Вот простые правила CSS, для адаптации изображений на веб-странице.
1 2 3 4 5 6 | img { max-width: 100%; /* на всякий случай, чтобы сохранить пропорции */ height: auto !important; } |
И если вы все еще заботитесь о корректности отображения в IE7 (хотя даже гугл уже официально отказался от поддержки браузеров IE по 8 версию), чтобы изображение не выглядело ужасным на маленьком экране, вот фитча:
1 2 3 | img { -ms-interpolation-mode: bicubic; } |
Адаптивное видео
Если вы пользуетесь HTML5 <video>, то ситуация с адаптацией аналогична изображениям:
1 2 3 4 5 6 | video { max-width: 100%; /* на всякий случай, чтобы сохранить пропорции */ height: auto !important; } |
Однако, куда большей популярностью пользуются сервиса видео хостинга Vimeo и YouTube. Да действительно куда удобней залить туда видеофайл получить HTML-код и вставить где нужно. Когда вы вставляете видео с этих сервисов, вы используете <iframe>. Да, внутри <iframe> может быть и HTML5 <video>, но вам не придется иметь с ним дело.
Таким образом надо решить проблему адаптации <iframe> под размеры страницы. Для этого «обернем» HTML-код для вставки видео в два блока div:
1 2 3 4 5 | <div id="containingBlock"> <div class="videoWrapper"> <iframe width="560" height="315" src="http://www.youtube.com/embed/mhZiNBwCPXU" frameborder="0" allowfullscreen></iframe> </div> </div> |
и используем вот такие правила для этих блоков и тега <iframe>:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | #containingBlock { width:70%; } .videoWrapper { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } |
Ширину блока (с id containingBlock) можно установить какую угодно (только в процентах). Другой блок (с классом videoWrapper) позиционировать относительно, а плавающий фрейм (iframe) абсолютно. Это сделано для того, чтобы определять координаты iframe от границ родительского элемента (блока div videoWrapper).
Отступ сверху в 25px — это место для панельки управления видео. Отступ снизу в 56,25% — это чтобы создать соотношением сторон видео 16:9, мы должны разделить 9 на 16 (0,5625 или 56,25%). Ну и ширина и высота самого фрейма в 100%. Автор данного решения.
Плагин FitVids.js
Если вы используете JQuery, и хотите автоматизировать описанное выше решение, я предлагаю вам попробовать FitVids.js. Этот небольшой плагин написанный на JQuery использует тот же способ, что мы рассмотрели выше но без вашего вмешательства. Все что нужно, подключить его и соответственно библиотеку JQuery. На мой взгляд это проще и удобней!
Данный плагин работает с такими проигрывателями как:
- YouTube;
- Vimeo;
- Blip.tv;
- Viddler;
- Kickstarter.
Пользуетесь MediaElements.js?
Этот плеер решает много проблем с использованием HTML5 видео, но на изменение разрешения экрана не реагирует. Дабы избавиться от этого недоразумения нижеследующий фрагмент CSS правил:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | width: 100% !important; height: auto !important; padding-top: 57%; } .mejs-overlay, .mejs-poster { width: 100% !important; height: auto !important; } .mejs-overlay-button { margin: 50px 0 0 -38px !important; } .mejs-mediaelement video { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100% !important; height: 100% !important; } |
HTML5 audio
Также не стоит забывать об аудио файлах, точнее их проигрывателях. Адаптируется HTML5 audio вот так:
1 2 3 | <audio controls src="sample.ogg"> <p>Не работает.</p> </audio> |
В данном случае просто играем шириной элемента. Да кстати в WebKit браузерах максимальная ширина этого элемента 800px, в Opera и Firefox такого ограничения нет.
1 2 3 | audio { width: 100%; } |
На демо вы можете посмотреть, что у нас получилось. Просто измените размер окна браузера.
Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницы сайта в соц. сетях — ссылки сверху. Если Вы используете какой-то другой способ, напишите о нем в комментарии. Спасибо!
Источник статьи/урока: https://xozblog.ru
По материалам: http://css-tricks.com/rundown-of-handling-flexible-media/