Как настроить видео и встраиваемый флеш под адаптивный дизайн

Автор:
22 Май, 2014

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

Конечно для отображения сайтов на разных разрешениях понадобились инновации, такие как адаптивный дизайн (responsive web design). Благодаря набору стилей отображение сайта на разных разрешениях можно сделать максимально удобным и комфортным для тех или иных пользователей.

Делаем адаптивные видео ролики

Часто, такой гибкий дизайн можно испортить вставив на страницу код видео YouTube или же баннера, написанного на флеше. Это создаст конфликт, ведь в iframe уже установлена ширина, которая не сможет подстроится под изменяющуюся ширину веб сайта. Появляются косяки, такие как выходящие за границы плееры или же рекламные блоки. Внешний вид сайта портиться и вместо адаптивного дизайна, Ваш сайт становится более похожим на костыль.

К счастью решение Ваших проблем уже давно найдено. Простенький код в таблицу стилей CSS легко решает проблемы вылезающих за границы сайта блоков:

/* простой код установки адаптивной ширины видео */
embed,
iframe,
object,
video {
	max-width: 100%;
}

Все блоки embed, iframe, object и video (html5) теперь получат атрибут ширины 100%, то есть если разрешение не позволит поместиться плееру целиком код его сожмет. После вставки видео Вам не придется беспокоиться, что плеер вылез за границу и создает лишние трудности для пользователей ваших сайтов.

Читайте также:


Комментарии:

Comments
  1. Наталья

    Спасибо! Очень нужная информация!

  2. Спасибо большое, я уж прям замучился с этими видео, как я их только не пробовал впихивать, а тут оказывается так всё просто решается!

Комментарии