От автора: Некоторые элементы HTML не очень хорошо сочетаются с адаптивными разметками. Один из них – старый добрый iframe, который может понадобиться при вставке содержимого из внешних источников, таких как YouTube.
В этой статье я покажу вам, как с помощью CSS заставить встроенный контент быть адаптивным настолько, чтобы тот (например, видео или календари) менял размер вместе с окном просмотра браузера. Для тех случаев, когда вставлять видео на ваш веб-сайт будут не программисты, и вам не хотелось бы полагаться на их способности добавлять дополнительную разметку, мы также рассмотрим решение, в котором вместо CSS используется JavaScript.
(В моем блоге можно посмотреть демопримеры этих техник.)
Разметка встроенного содержимого
Такие сервисы, как YouTube, обеспечивают код, который для вставки содержимого можно скопировать и вставить на свой сайт. Я обычно рекомендую своим клиентам размещать видео на YouTube’е, так как это экономит место на сервере и, вне зависимости от браузера или устройства пользователя, YouTube правильно воспроизведет это видео. Два основных способа размещения видео на веб-сайте – это элемент HTML5 video, который не работает в старых версиях Internet Explorer, и Flash, который не работает в устройствах iOS и несовместим со стандартами.
При вставке содержимого из внешнего источника код будет содержать iframe:
|
1 |
<iframe src="//www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0"></iframe> |
Этот iframe дает внешнему контенту возможность отображаться на вашем веб-сайте, так как включает URL, указывающий на источник контентного потока.
Тем не менее, вы заметите, что iframe включает атрибуты width и height. Удалите их, и iframe исчезнет, потому что у него не будет размеров. И, к сожалению, вы не сможете отладить это в своей таблице стилей.
Атрибут width означает, что на экране уже 560 пикселей встроенный контент будет выдаваться за пределы своего содержащего элемента, разрушая разметку. В пример ниже я добавила вышеприведенный код со страницы своего блога.
Скриншот взят из iPhone в книжной ориентации (шириной 320 пикселей), а остальная страница уменьшилась настолько, чтобы встроенное содержимое поместилось в экран. Далеко не идеально!
Скриншот взят из iPhone в книжной ориентации (шириной 320px).
К счастью, есть способ обойти эту проблему с помощью CSS. Для начала я покажу вам, как сделать это с встроенным видео, а затем с календарями.
Адаптивное видео
РАЗМЕТКА
Чтобы сделать встроенный контент адаптивным, вам придется добавить вокруг iframe содержащий упаковщик. У вас получится следующая разметка:
|
1 2 3 4 |
<div> <iframe src="//www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0"> </iframe> </div> |
Следующий шаг – добавить стили этому новому упаковщику и iframe внутри него.
CSS
Во-первых, назначаем стили содержащему упаковщику с классом .video-container. Как предлагает Терри Кобленц (Thierry Koblentz) в своей статье на ALA «Создание собственных видео-форматов» (“Creating Intrinsic Ratios For Video”), можно в таблице стилей применить следующий фрагмент кода:
|
1 2 3 4 5 6 7 |
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } |
Он делает следующее:
Установка position на relative дает возможность применить абсолютное позиционирование к самому iframe, до чего мы вскоре доберемся.
Значение padding-bottom высчитывается из соотношения размеров видео. В данном случае форматное соотношение составляет 16:9, что означает высоту в 56,25% от ширины. Для видео с соотношением 4:3 устанавливаем padding-bottom на 75%.
Значение padding-top установлено на 30 пикселей, чтобы оставалось место под хром — это особенность видеороликов YouTube.
height установлена на 0, так как нужную высоту элементу дает padding-bottom. Мы не устанавливаем ширину, потому что она будет меняться автоматически вместе с адаптивным элементом, содержащим этот div.
Установив overflow на hidden, мы гарантируем, что любой «вылезший» за этот элемент контент будет скрыт из вида.
Нам также нужно назначить стили самому iframe. Добавьте в свою таблицу стилей следующее:
|
1 2 3 4 5 6 7 |
.video-container iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; } |
Целью этого кода являются iframe’ы внутри контейнеров с классом .video-container. Давайте разберем его:
Абсолютное позиционирование использовано потому, что у содержащего элемента высота равна 0. Если бы iframe был нормально позиционирован, мы тоже назначили бы ему высоту в 0.
Свойства top и left помещают iframe точно в содержащий элемент.
Свойства width и height гарантируют, что видео займет 100% пространства, используемого содержащим элементом (который на самом деле установлен с отступом).
Если это сделать, видео отныне станет менять размер вместе с шириной экрана. Вот как это будет смотреться на десктопе:
Скриншот с настольного компьютера: видео, меняющее размер ширины экрана.
А вот как это станет смотреться на экране шириной 320 пикселей:
Видео на экране шириной 320 px.
Давайте перейдем к другим источникам встроенного контента — и особенно календарям Google.
Адаптивный календарь
РАЗМЕТКА
CSS для адаптации любого вида встроенного содержимого, по сути, тот же самый, но у разного контента разные соотношения размеров, что означает для вас необходимость установить соответствующее значение padding-bottom.
Ниже приведен скриншот веб-сайта, которым я управляю для начальной школы, веб-сайта, в который встроен календарь Google. Как видно, на маленьком экране календарь нарушает разметку. В данном случае, веб-сайт отображается в правильной ширине, но календарь выходит за ширину экрана.
На маленьком экране календарь нарушает разметку.
Разметка встроенного календаря будет такой:
|
1 |
<iframe src="//www.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23FFFFFF&src=60aqhusbghf7v0qvvbfu1ml22k%40group.calendar.google.com&color=%232952A3&ctz=Europe%2FLondon" style=" border-width:0 " width="800" height="600" frameborder="0" scrolling="no"></iframe> |
Чтобы сделать календарь адаптивным, добавьте div с классом .calendar-container, который будет содержать iframe:
|
1 2 3 4 |
<div> <iframe src="//www.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23FFFFFF&src=60aqhusbghf7v0qvvbfu1ml22k%40group.calendar.google.com&color=%232952A3&ctz=Europe%2FLondon" style=" border-width:0 " width="800" height="600" frameborder="0" scrolling="no"> </iframe> </div> |
Следующий шаг – назначить этому div’у стили.
CSS
CSS календаря почти идентичен CSS видео, с двумя исключениями: соотношение размеров будет другим, и не потребуется padding-top. Добавьте в свою таблицу стилей следующее:
|
1 2 3 4 5 6 |
.calendar-container { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; } |
В этом случае iframe имеет ширину 800 пикселей и высоту 600 пикселей, что дает нам соотношение сторон 4:3. Поэтому установите padding-bottom на 75%.
Сделав это, нам нужно применить те же стили к элементу iframe в его новом контейнере:
|
1 2 3 4 5 6 7 |
.calendar-container iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; } |
Это в точности те же стили, которые мы применяли к видео. Теперь календарь станет менять размеры вместе с окном браузера, как видно в Opera Mobile на телефоне Android:
Пока вы помните о том, что нужно обернуть встроенные календари и видеоролики в подходящий содержащий элемент, этот CSS будет работать для любых добавленных на ваш веб-сайт новых видео и календарей.
Проблема, однако, состоит в том, что хотя вы можете вместить весь календарь на страницу, он все равно почти неприменим, потому что области касания очень малы и информация не видна. Если вам нужно отображать именно календарь Google Calendar, то ладно, но если можно применить более удобные решения вроде простого CSS (установив к строкам таблицы display: block, например), или w3widgets Responsive calendar или Calendario для собственных календарей, то ваши пользователи это оценят.
Адаптивное видео с помощью CSS или JavaScript
Если вы разрабатываете адаптивный веб-сайт с помощью системы управления контентом, то в какой-то момент одному или более редакторов веб-сайта придется, возможно, вставлять видео. Можно отправить редакторов на EmbedResponsively.com, где генерируются адаптивные коды embed для вставки сторонних медиапродуктов одним щелчком и при помощи лишь CSS. В качестве альтернативы можно применить решение JavaScript, и освободить нервных редакторов от необходимости добавлять дополнительные CSS и разметку. Однако как можно дольше избегайте этого.
До последнего времени большинство решений были плагинами, которые хороши до некоторой степени, но могут вызвать проблемы с производительностью. Популярный плагин – это FitVids.js, разработанный Крисом Койером (Chris Coyier) и Paravel.
Более современное решение – просто применить скрипт — такой, как FluidVids.js, разработанный Тоддом Мотто (Todd Motto). FluidVids.js легко использовать:
1. Скачайте скрипт (ZIP) с GitHub и выгрузите на свой сервер с той же структурой папок, в которой идут скачанные файлы. Так, сам скрипт разместится в папке с названием dist.
2. Вызовите скрипт к секции
каждой страницы со следующим кодом:|
1 |
<script src="dist/fluidvids.js></script> |
Вот и все, что нужно сделать для того, чтобы видео меняло размер во всех устройствах, поддерживающих JavaScript. Он работает не только для YouTube, но и для Vimeo. Проблема, однако, в том, что если у ваших пользователей отсутствует поддержка JavaScript’а, или он еще не загружен, или неправильно загрузился, то единственный альтернативный вариант, который можно применить – это добавить в таблицу стилей следующее:
|
1 2 3 |
iframe { max-width: 100%; } |
Так вы гарантируете, что видео изменит размер до ширины окна браузера. Но не изменит высоты; к сожалению, iframe просто таким образом не работает. Так что видео не нарушит вашей разметки, но и не станет отлично смотреться. На самом деле, это не очень хорошая опция, поэтому если можно избежать применения JavaScript для видеороликов, то лучше так и сделать.
Адаптивные карты Google Maps
Не считая видео и календарей, еще одна обычная проблема – это вставка карт Google. В основном мы опять пользуемся той же собственной техникой формата, а при установке padding-bottom j,обертки просто делим высоту на ширину и добавляем соотношение размеров в CSS.
Обычно код, генерируемый Google Maps, выглядит так:
|
1 2 |
<iframe src="//www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3022.260812859955!2d-73.990184!3d40.756288!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A 0xb134c693ac14a04c!2sThe+TimesCenter!5e0!3m2!1sen!2suk!4v1393485725496" width="500" height="450" frameborder="0" style="border:0"></iframe> |
Мы просто оборачиваем div вокруг iframe и применяем к нему знакомые стили CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.google-maps { position: relative; padding-bottom: 90%; // (450 ÷ 500 = 0.9 = 90%) height: 0; overflow: hidden; } .google-maps iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } |
Вот как будет выглядеть разметка:
|
1 2 3 4 5 |
<div class="google-maps"> <iframe src="//www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247 !3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s !4v1385710909804" width="500" height="450" frameborder="0" style="border:0"></iframe> </div> |
Вуаля! И снова можно просто применить EmbedResponsively для генерирования copy-paste-кода одним щелчком.
Резюме
Встроенное содержимое имеет дурную привычку нарушать адаптивные разметки, так как содержится в iframe с фиксированной шириной. В этой статье видно, как добавить один содержащий упаковщик и немного CSS, чтобы гарантировать изменение размеров встроенного контента в iframe вместе с окном браузера.
Иногда этого достаточно, но временами могут понадобиться более современные решения, так как изменение размера не всегда является выходом. Мы также рассмотрели генераторы кода embed и альтернативные решения, пользующиеся JavaScript’ом, которые иногда могут оказаться необходимыми, особенно если редакторам приходится иметь дело со множеством видео, и у них недостаточно нужных технических навыков, или если CMS не допускает встроенные стили.
А как вы вставляете сторонний контент в свои адаптивные веб-сайты? Вы обнаружили какие-либо особенные приемы или методики? Как выглядит ваш рабочий процесс вставки подобного содержимого?
Автор: Rachel McCollin
Источник: //www.smashingmagazine.com/
Редакция: Команда webformyself.
Комментарии (11)