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

Многие из вас наверное заметили, что тенденцией современности по прежнему остается адаптивность вашего контента под любые устройства. Но что делать с роликами из YouTube?

Как адаптировать ролики из YouTube на своем сайте?

Для начала выделим какой-то контейнер и вставим в него наш ролик. Чтобы это сделать нажмите “Поделиться” под видео на сайте и выберите “HTML-код”. Копируем наш iframe и получаем следующее:

<div class="video-block">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Y421bWMelqE" frameborder="0" allowfullscreen></iframe>
</div>

Наш CSS выглядит следующим образом:

.video-block {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-block iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Давайте разберемся, что происходит: наш контейнер с классом .video-block на самом деле не имеет фиксированной ширины и вы можете вставлять наш адаптивный ролик с youtube в любое место на сайте, и он займет всю ширину. Внутренний отступ снизу, который равен 56.25% – задает высоту контейнера (если соотношение 16:9, если 4:3 – поставьте 75%). Таким образом, мы получили адаптивный блок с видео-роликом, который корректно будет отображаться на всех устройствах.

UPDATE: советую использовать стили для адаптивного контейнера, если ширина блока 640, то:

.video-block-opt {
  text-align: center;
  margin-bottom: 25px;
}

@media (max-width: 640px) {

  .video-block-opt {
      position: relative;
      padding-bottom: 56.25%;
      padding-top: 30px;
      height: 0;
      overflow: hidden;
  }
  .video-block-opt iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }

}

Обратите внимание, класс у контейнера поменялся на .video-block-opt и теперь наши стили применяются только на маленьких экранах. Надеюсь у вас всё получилось и теперь вы знаете как сделать ваши ролики из ютуб адаптивными :).

автор: Dmitriy

З 2011 року займаюся веб-розробкою. Зараз я – PHP Full Stack Developer.
Обговорити ваш проект, а також дізнатися більше про мене ви можете на цьому сайті:
dev.forwww.com

Email: dmitriyribka@gmail.com

46 коментаря

  1. Благодарю, решение подошло, но не могу решить проблему с выравниванием видео по центру по горизонтали, а также с широким отступом снизу. На смартфоне блок с видео теперь не вылазит за границу, однако пропорции видео теперь вертикальные, что не очень красиво.

    1. Артем, вижу вы решили поместить видео в тег center для выравнивания, этот тег немного устарел, рекомендую добавить вашему блоку .video-block {margin: 0 auto;}. Что касается отступов – вам нужно убрать пустые теги p, и, немного улучшить CSS код который дал: .video-block {margin: 0.857143rem auto;} где 0.857143rem, как я понял, нужный вам отступ.

  2. Подскажите, пожалуйста, а как сделать два видео с ютуба в ряд? Когда делаю один по Вашему принципу, то все отлично, а когда два, то показывается только один

    1. попробуйте добавить контейнерам свойство display: inline-block или же в некоторых случаях лучше использовать float: left . если на вашем сайте подключен bootstrap то добавьте просто классы для контейнеров col-sm-6 (каждому)

  3. У меня не получается таким методом: когда вставляю видео в контейнер, на странице тоже меняется его размер, оно становится узким и длинным. А при просмотре на мобильной версии всё теперь хорошо. Что делать, уже не знаю, много методов перепробовала… В чём причина может быть?

    1. В редакторе моей темы сейчас так:
      .post-video {
      position: relative;
      padding-bottom: 56.25%;
      padding-top: 30px;
      height: 0;
      overflow: hidden;
      font-size:.9em;
      margin-bottom: 15px;
      }
      .post-video iframe,
      .post-video object,
      .post-video embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      }

      На сайте видео норм., а на мобильной версии не уменьшается и появляется полоса прокрутки

  4. Добрый день! Могли бы Вы помочь мне решить такой вопрос:
    Сайт адаптивный, вставляю прямо в записи через код лендинги товарных партнерок. width=”1700″ при этом адаптируется, а height=”1000″ приходится подгонять по высоте путем подбора вручную, но, после оправки заявки, остается большое пустое пространство.
    Как сделать эту высоту адаптивной содержимому фрейма?

  5. Здравствуйте, а как сделать ограничение, чтобы видео при просмотре на компьютере не было на всю страницу? А так всё масштабируется.

    1. вам нужно либо поставить max-width – для этого блока, либо использовать медиа запросы для определенных расширений, и уже там прописывать max-width

      1. Дмитрий, а почему получается, что сам блок видео идёт как надо, в размере 560 х 315 px, но есть белое поле (судя по размеру этого поля, это как раз размер видео, если бы оно было в полную ширину) http://livreklama.ru/klad

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

          1. Сделал див на нужную ширину, и всё работает. Спасибо.

  6. Оборачиваю видео с ютуб в контейнер div,
    В CSS файл добавил код из статьи, но на мобильных устройствах ничего не поменялось. В чем может быть проблема?

    .youtube {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    }
    .youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

      1. 1. убедитесь что у вас нет больше стилей для класса youtube
        2. убедитесь что в хтмл используется вложенность div class=”youtube” -> ifame …
        3. убедитесь что у вас обновлен кэш сайта или браузера – Ctrl+F5

  7. Все получилось! Спасибо.
    А можно ли для отображения на десктопе уменьшить видео по ширине? а то на всю ширину сразу на большом экране не очень выходит

    1. можно, если вы используете bootstrap написать отдельные стили используя медиа-запросы:
      @media (min-width: 1200px) {}
      @media (min-width: 992px) and (max-width: 1199px) {}
      @media (min-width: 768px) and (max-width: 991px) {}
      @media (max-width: 767px) {}

  8. Здравствуйте, а это решение еще работает? Посмотрите пожалуйста, скопировано через поделиться, однако, у меня просто iframe(((((
    pechnoydom.ru/products/keramicheskij-kamin-laponie-4012
    в мобильной версии беда не получается сделать его просто в ширину страницы.
    даже на боди овервлоу-х хидден не помогает горизонтальную прокрутку убрать(

    1. Здравствуйте, так у вас видео находится в теге p, а вам нужно, как на примере, оберунть его в div с тем классом что написал. Также, добавить в свои стили – стили со статьи.

  9. Дмитрий, спасибо. UPDATE работает, как говорится, из коробки.
    С размещением двух видео на одной линии, слева и справа в блоке, вопрос решил через упаковку в таблицу, без этого при сужении экрана одно из видео почему-то пропадало.
    Вопрос в другом, почему изначально в коде не поставить 1000px вместо 640 ?
    @media (max-width: 640px) {
    для случаев, когда например и не мобильный телефон, но и не стандартный широкоформатный монитор. По-сути мы ничего от этого не теряем, просто плейер начнет менять свои размеры более гибко, подстраиваясь раньше.

Залишити коментар до Николай Скасувати коментар