Главная » HTML & CSS » Адаптивное видео для сайта с помощью CSS

Адаптивное видео для сайта с помощью CSS

Адаптивное видео для сайта с помощью CSS

Как часто при использовании встроенного из различных источников у себя на сайте или блоге, вам приходилось подгонять размер того или иного видеоролика, предварительно изменяя заданные значения ширины и высоты плеера? Думаю, что большинство блогеров именно так и поступают, раз за разом, в ручную прописывают необходимые параметры, для того чтобы встроенное виде не выходило за границы блока, в котором оно расположено.
А ведь существует довольно простое и изящное решение, существенно облегчающее этот процесс. Приведу простой пример и в довесок нему готовый набор правил CSS, для реализации абсолютной отзывчивости встраиваемого видео через iframe, object и embed с популярных видео-сервисов, таких как YouTube, Vimeo и других.

Для того чтобы видео автоматом подстраивалось под размеры родительского блока, достаточно в таблице стилей CSS, заблаговременно создать отдельный класс и определить все необходимые свойства для создания «резинового» контейнера, в котором и будет в последующем располагаться встроенный видеоролик. А так как видео-сервисы предлагают различные методы вставки видео на сайт, iframe, object и embed, следует учесть эту особенность, и задать стили для всех этих вариантов сразу. Тем самым в дальнейшем, мы избавим себя от лишних и ненужных телодвижений.

CSS

.video-responsive { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; 
  overflow:hidden; 
} 
.video-responsive iframe, 
.video-responsive object, 
.video-responsive embed {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%;
  height: 100%; 
}

Как видите всё очень просто, задаём относительное позиционирование для родительского блока и абсолютное относительно родителя, для встроенных элементов, определив им при этом, процентные значения ширины width: 100%; и высоты height: 100%;, чтобы в итоге видеоплеер смог растягиваться или сжиматься в соответствии размеров основного контейнера.

Со стилями разобрались, остаётся создать div контейнер с предопределенным классом, в нашем случае это class="video-responsive", затем вставить внутрь этого контейнера код нужного вам видеоролика, и всю эту конструкцию прописать там где вы планируете демонстрировать ваши и чужие видео-шедевры)).

<div class="video-responsive">
  <iframe width="auto" height="auto" src="ссылка на видео" frameborder="0" allowfullscreen></iframe>
</div>

Вот и всё! Теперь все ваши видеоролики станут по-настоящему отзывчивыми(резиновыми) и будут легко видоизменяться в зависимости от размеров родительских блоков, а так же при просмотре на экранах различных пользовательских устройств.

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

Возникнут вопросы, не стесняйтесь, задавайте. Если вам известен более надёжный и простой способ создания адаптивного блок с встроенным видео, пишите в комментариях, будет очень интересно рассмотреть и другие варианты.

PS: После того, как статья увидела свет, в комментариях, lakispy внёс важные поправки, спасибо ему за это, каюсь, я как-то упустил из виду:

Для видео ВКонтакте iframe параметры ширины и высоты обязательны и если они не заданы, то встраиваются минимальные значения автоматически при загрузке страницы с фреймом. Так что добавляйте параметры width="auto" height="auto" в фрейм

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

27 комментариев
  1. Karev:

    Интересный урок. Спасибо.

    Вопрос:

    При обычном размещении ролика (iframe) с ютюба с параметрами width="560" height="315" он занимает окно ровно 560×315

    При размещении с Вашим кодом он занимает 100% ширины страницы, т.е., если страница узкая, то всё нормально, а если, например, 1200 px, то ролик становится почти вдвое шире чем положенные «560».

    Это так и задумано или я что-то делаю не правильно?

    Помогает помещение всей конструкции в контейнер с max-width: 560px; — но это ж как то не кошерно (ролики ведь могут быть разной ширины...), да и max-width, видимо, не все браузеры «кушают».

    Ответить
    • driver:

      Именно, всё так и задумано )).

      Видеоплеер подстраивается под размеры родительского контейнера. Назвав это решение адаптивным, я конечно слегка погорячился, правильнее было бы обозвать видео отзывчивым или резиновым.

      Ширина видео (iframe,object,embed) задана в процентах width: 100%;. Использование max-width вполне нормальная практика, свойство не срабатывает только в IE ниже 8-й версии.

      Ответить
    • вордпрес сейчас прекрасно воспринимает различный код в частности блоки

      я уверен вам будет полезно — если вы вставите ссылку на видео и в исходнике вашей статьи не в визуальном а в текстовом редакторе — обернёте данную ссылку в блок и пропишите ему следующие параметры

      <div style="width: 50%; margin: 0 auto;"> ссылка на видео с ютуба </div>

      и тогда ваше видео не будет расползаться на всю ширину родительского блока в котором лежит ваша статья — изменяя параметры ширины блока и в %-ом соотношении вы сможете регулировать ширину вашего видео ролика + ко всему вы сохраните ему адаптивностть относительно ширины экрана устройства ну с помощью margin — вы сможете регулировать положение вашего блока

      Ответить
  2. Сергей:

    Спасибо, но у меня что-то не получилось, все сделал как у вас в демке, но почему-то все равно скроллинг горизонтальный...

    Ответить
  3. Тимофей:

    Спасибо,всю ночь мучился искал решение,ваш способ работает,спасибо.

    Ответить
  4. Тимофей:

    Вот еще способ,часто используемый,он адаптирует плеер,но высоту надо регулировать в ручную,иначе получается высота 100% а ширина в размер блока,такое некрасивое видео)).

    embed,

    iframe,

    object {

    max-width: 100%;

    Ответить
  5. Спасибо за полезные решения. Но так и не смог решить задачу, как сделать не 100 ширину показа, а, допустим, 90%. Догадываюсь, что виной всему параметр auto у ширины и высоты фрейма, который автоматом грузит видео на весь возможный div. C каким бубном сплясать в этом случае? Может есть решение?

    Ответить
  6. Леонид:

    Спасибо за урок. Хотелось бы узнать, как отключить авто воспроизведение?

    Ответить
«12
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru