Dobrovoi Master
сделано с душой

В состоянии постоянного подключения...
Главная » 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 !

48 комментариев
  1. Тимофей:

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

    Ответить
    • driver:

      Спасибо Тимофей за отзыв.

      Однажды разруливали уже такую тему, там я использовал встроенное видео в блок аккордеона, кому-то было необходимо выводить блок с подписями к роликам непосредственно приклеенные к низу div-a с фреймом. Просто использовал дополнительный div и и всё.

      Откопал в редакторе у себя, можете посмотреть, может это самое оно ))). Откроете Здесь>> Аккордеон на пункте «Встроенное видео», дальше думаю разберётесь, я подписал что куда вставлять. Исходники посмотрите там же в редакторе.

      Удачи!

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

    Ответить
    • driver:

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

      Ответить
  3. Спасибо, воспользовался — все прекрасно работает. Особенно актуально для сайтов под смартфоны и прочие айфоны.))

    Добавил в первый стиль вот такие параметры:

    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);

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

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

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

    Ответить
    • driver:

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

      Ответить
  5. Евгений:

    Огромное спасибо!!!

    Сейчас разрабатываю сайт с видео и есть... была необходимость адаптировать размеры встроенного видео для различных устройств. Сайт делаю на cms Drupal, вставил ваши стили — и всё заработало как надо!!

    Ещё раз ОГРОМНЕЙШЕЕ спасибо!!!!!!

    Ответить
  6. класс:

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

    Ответить
  7. Эля:

    Спасибо большое за урок.

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

    Ответить
    • driver:

      Здравствуйте, Эля.

      Поместите блок с видео в дополнительный div с маржой 0 auto Стиль можете добавить напрямую к тегу в html, примерно так:

      <div style="margin: 0 auto;"> <div class="video-responsive"> Здесь код встраиваемого видео.... </div> </div>

      Ответить
  8. Эля:

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

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

    Ответить
  10. Александр:

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

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

    Ответить
    • driver:

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

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

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

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

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

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

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

Subscribe without commenting

Обновления комментариев по RSS RSS комментариев к этой записи »

Рейтинг@Mail.ru