Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

Адаптивное видео для сайта с помощью 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 и поделитесь ссылкой на запись в своих соц-сетях:

Всего комментариев: 58

  • Тимофей: 14 августа, 2014 в 16:33

    Отличный пример только я не могу с низу к плееру подогнать к примеру полосу прокрутки с меню видео роликов. пытался менять слои ничего не вышло условие padding-bottom: 56.25%; резервирует место (между родителем и вложенным iframe) в которое ничего нельзя вставить. Очень сильно мешает при вёрстке. Подскажите можно ли как то сократить это расстояние.

    Ответить
    • driver: 14 августа, 2014 в 20:24

      Спасибо Тимофей за отзыв.
      Однажды разруливали уже такую тему, там я использовал встроенное видео в блок аккордеона, кому-то было необходимо выводить блок с подписями к роликам непосредственно приклеенные к низу div-a с фреймом. Просто использовал дополнительный div и и всё.
      Откопал в редакторе у себя, можете посмотреть, может это самое оно ))). Откроете Здесь>> Аккордеон на пункте «Встроенное видео», дальше думаю разберётесь, я подписал что куда вставлять. Исходники посмотрите там же в редакторе.
      Удачи!

      Ответить
  • lakispy: 12 ноября, 2014 в 02:40

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

    Ответить
    • driver: 12 ноября, 2014 в 03:04

      Спасибо за дополнение. В принципе можно указать и самые большие значения для фрейма, блок подстроится под размеры родительского контейнера.

      Ответить
  • Павел: 20 марта, 2015 в 23:11

    Спасибо, воспользовался — все прекрасно работает. Особенно актуально для сайтов под смартфоны и прочие айфоны.))
    Добавил в первый стиль вот такие параметры:
    margin: 0px auto;
    -webkit-box-shadow: 0 4px 24px rgba(50, 50, 50, 0.40);
    -moz-box-shadow: 0 4px 24px rgba(50, 50, 50, 0.40);
    box-shadow: 0px 4px 24px rgba(50, 50, 50, 0.40);

    Получилось очень симпатично.

    Ответить
  • Сергей: 6 мая, 2015 в 00:39

    Спасибо, Андрей — это, пожалуй, самое грамотное и понятное толкование о том, как сделать iframe с видео резиновым. Я воспользовался, огромное спасибо. (Единственное, что сделал отступы слева и справа).

    Ответить
    • driver: 6 мая, 2015 в 11:21

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

      Ответить
  • Евгений: 7 мая, 2015 в 21:23

    Огромное спасибо!!!
    Сейчас разрабатываю сайт с видео и есть… была необходимость адаптировать размеры встроенного видео для различных устройств. Сайт делаю на cms Drupal, вставил ваши стили — и всё заработало как надо!!
    Ещё раз ОГРОМНЕЙШЕЕ спасибо!!!!!!

    Ответить
  • класс: 27 мая, 2015 в 09:52

    Класс — всё работает!

    Ответить
  • Эля: 17 сентября, 2015 в 06:23

    Спасибо большое за урок.
    Как теперь выровнять видео по центру.text-align:center; не помогает((

    Ответить
    • driver: 17 сентября, 2015 в 09:47

      Здравствуйте, Эля.
      Поместите блок с видео в дополнительный div с маржой 0 auto Стиль можете добавить напрямую к тегу в html, примерно так:
      <div style="margin: 0 auto;">
      <div class="video-responsive">
      Здесь код встраиваемого видео....
      </div>
      </div>

      Ответить
  • Эля: 17 сентября, 2015 в 11:45

    Спасибо за ответ. Но дополнительный div все-равно не помогает((

    Ответить
  • Haskin: 24 октября, 2015 в 11:15

    Спасибо автору огромное! Как раз был затык, как реализовать адаптивность видео на сайте. Ваш код очень помог — всё работает! Благодарю 🙂

    Ответить
  • Александр: 21 декабря, 2015 в 10:28

    Спасибо большое, мне очень помогло

    Ответить
  • Dimon: 26 февраля, 2016 в 05:05

    А можно сразу под несколько плееров, просто стоит переключатель плееров. Так бы отлично было поменять шаблон.

    Ответить
    • driver: 26 февраля, 2016 в 16:13

      Конечно можно. Не имеет значения, какой плеер вы вставите в резиновый <div class="video-responsive">...</div>, на странице таких контейнеров может быть сколько угодно.

      Ответить
  • Сергей: 16 марта, 2016 в 18:01

    Здравствуйте, все плееры отлично подводятся под любые разрешения, но есть одна проблема. Основной плеер работает через script, код такого типа <script type='text/javascript' src='https://site.ru/player/api.php?w=700&h=390&kp_id=[xfvalue_id]&copy=[xfvalue_copy]'></script>
    <div id='moonwalkPlayer'></div>
    и такой плеер не может подстроится под разрешение, только становится маленькое окошко, а сам плеер за границами и его полностью не видно. Помогите пожалуйста…

    Ответить
  • Karev: 4 апреля, 2016 в 06:04

    Интересный урок. Спасибо.
    Вопрос:
    При обычном размещении ролика (iframe) с ютюба с параметрами width=”560″ height=”315″ он занимает окно ровно 560×315
    При размещении с Вашим кодом он занимает 100% ширины страницы, т.е., если страница узкая, то всё нормально, а если, например, 1200 px, то ролик становится почти вдвое шире чем положенные «560».
    Это так и задумано или я что-то делаю не правильно?
    Помогает помещение всей конструкции в контейнер с max-width: 560px; — но это ж как то не кошерно (ролики ведь могут быть разной ширины…), да и max-width, видимо, не все браузеры «кушают».

    Ответить
    • driver: 4 апреля, 2016 в 18:36

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

      Ответить
    • Oleg Vest: 8 ноября, 2017 в 13:25

      вордпрес сейчас прекрасно воспринимает различный код в частности блоки
      я уверен вам будет полезно — если вы вставите ссылку на видео и в исходнике вашей статьи не в визуальном а в текстовом редакторе — обернёте данную ссылку в блок и пропишите ему следующие параметры
      <div style="width: 50%; margin: 0 auto;">
      ссылка на видео с ютуба
      </div>

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

      Ответить
      • Сергей: 17 февраля, 2017 в 14:43

        Олег, не работает! Вполне возможно, что это зависит от шаблона.

        Ответить
  • Сергей: 28 ноября, 2016 в 04:05

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

    Ответить
  • Сергей: 17 февраля, 2017 в 14:49

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

    Ответить
    • driver: 17 февраля, 2017 в 20:12

      Здравствуйте, Сергей.
      Попробуйте в контейнер .video-responsive прописать:
      margin: 0 auto;
      width: 90%

      см.пример

      Ответить
  • Леонид: 16 июля, 2017 в 20:27

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

    Ответить
  • iveri: 28 августа, 2017 в 02:18

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

    Ответить
  • Тимофей: 9 ноября, 2017 в 10:55

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

    Ответить
  • Тимофей: 9 ноября, 2017 в 11:00

    Вот еще способ,часто используемый,он адаптирует плеер,но высоту надо регулировать в ручную,иначе получается высота 100% а ширина в размер блока,такое некрасивое видео)).
    embed,
    iframe,
    object {
    max-width: 100%;

    Ответить
  • Антон: 19 февраля, 2018 в 23:55

    Спасибо большое, помогло ) Как раз то, что искал 🙂

    Ответить
  • Виталий: 8 августа, 2018 в 21:34

    Здравствуйте.Сделал все как Вы описали вот все хорошо, видео получилось адаптивным но на сайте оно стало отображаться таким же маленьким как и на мобильных устройствах. Меняю в классе div с авто на свои значения тогда всё перестает работать. Подскажите пожалуйста как решить вопрос?

    Ответить
    • driver: 8 августа, 2018 в 21:49

      Здравствуйте, Виталий.
      Если вы всё сделали, как расписано в уроке, проблем быть не должно, но всё-таки, хотя и не вижу ваших исходников, могу предложить одно решение, в селектор .video-responsive добавить:
      margin: 0 auto;
      width: 100%

      Ответить
      • Виталий: 8 августа, 2018 в 21:58

        Не получается. Ссылку на сайт оставил

        Ответить
  • Виталий: 8 августа, 2018 в 22:34

    В таблицу стилей самой темы я правильно понимаю? Если так то я это все прописал.

    Ответить
    • driver: 8 августа, 2018 в 23:43

      Не знаю куда и что вы прописали, но в файле темы /wp-content/themes/azera-shop/style.css не нашёл ничего похожего на селектор .video-responsive. Конечно может я что то пропускаю, попробуйте добавить стили через панель управления: Внешний вид — Темы — Ваша тема — Настроить — Дополнительные стили, в этом пункте и прописываете необходимое

      Ответить
  • Виталий: 8 августа, 2018 в 23:41

    Странно я все прописал в файле css все правила, но нечего не изменилось.

    Ответить
    • driver: 9 августа, 2018 в 00:01

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

      Ответить
  • Виталий: 8 августа, 2018 в 23:54

    Да получилось, но сейчас видео стало наоборот большим, больше заданного значения.

    Ответить
    • driver: 9 августа, 2018 в 00:07

      Я уже писал по этому поводу, просто в селектор .video-responsive добавьте:
      margin: 0 auto;
      width: 80%

      значение свойства width: можете указать такое, какое вам нужно, 80% это чисто для примера

      Ответить
    • driver: 9 августа, 2018 в 00:10

      Ну, или так как вы сделали, задав размеры непосредственно в iframe

      Ответить
  • Виталий: 9 августа, 2018 в 00:28

    Ширина нормально можно указывать любое значение,а высоту как добавить что бы так же регулировать размер?

    Ответить
    • driver: 9 августа, 2018 в 01:40

      Поэкспериментируйте с значением свойства padding-bottom: в селекторе .video-responsive, для начала замените padding-bottom: 56.25%; на padding-bottom: 26.25%;

      Ответить
  • Виталий: 9 августа, 2018 в 12:19

    Добрый день. Благодарю за вашу интересную статью,Вы мне очень помогли. У Вас живой блог! Обязательно оставлю его в закладках ))

    Ответить
  • Эльдар: 25 августа, 2018 в 11:21

    Спасибо, помогло, не отображалось корректно, вспомнил что нужно очистить кэш сайта(установлен для скорости отображения страниц) и все встало на свои места! Благодарю!

    Ответить
  • Сергей: 19 октября, 2018 в 02:03

    Здравствуйте применил данный способ , всё хорошо , если видео расположено не в открывающейся вкладке на сайте. Сложность в том , что если видео разместить в анимированной вкладке ,на мобильном это видео не открывается во весь экран. Что посоветуете ?

    Ответить
  • Chingis: 8 ноября, 2018 в 05:14

    как убрать автовоспроизведение?

    Ответить
    • driver: 8 ноября, 2018 в 05:37

      1. Сразу после ссылки на ролик до кавычек вставьте ?autoplay=0, если перед ним нет других параметров
      2. И &autoplay=0, если перед ним какие-то параметры уже присутствуют.
      Ну, а самое простое, это вовсе исключить параметр autoplay из ссылки на видео.
      Всё это касается настроек встраиваемого видео с Youtube, по-умолчанию ссылки на каждый ролик выдаются без параметра автовоспроизведения, так что смотрите свои ссылки на видео

      Ответить
  • Алексей: 24 ноября, 2018 в 22:29

    Добрый день! Может не по теме, но!
    У меня получилось сделать резиновым видео, но это немного не устраивает((
    Подскажите пожалуйста, как сделать как у Вас в примере, слева (справа) текст и видео, разделенное чертой.
    Весь блок так же адаптивный.
    Буду благодарен за помощь

    Ответить

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>