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

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

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

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

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

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

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

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

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года.Предоставляю услуги по созданию проектов на CMS 1С-Битрикс — сайты, шаблоны и компоненты с нуля, а также доработка функционала на уже существующих проектах.


Другие виды работ:

— Вёрстка макетов (HTML, CSS, JavaScript, jQuery, JADE, SASS, Gulp);

— Натяжка вёрстки на 1С-Битрикс;

— Скрипты на PHP и JS (jQuery);

— Парсинг (CSV, XML, XLSX, JSON);

— Интеграции со сторонними сервисами по API;

— Многоязычные версии сайтов;

— и многое другое :)


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

E-mail: dmitriyribka@gmail.com

Skype: cinemacreaterus


33 комментария

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

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

      1. Дмитрий, благодарю. С тегами P только проблема, в редакторе их нет. Откуда они подставляются непонятно.

  2. Не работает. Вообще никак не реагирует.
    Может потому-что сайт на статичном штмл.

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

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

  4. Спасибо за информацию Теперь видео тоже стало адаптивным:) а то сайт на мобилах был кривым.

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

    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%;
      }

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

  6. Здравствуйте!
    На мобильной теперь корректно отображается, но на ПК довольно крупно.

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

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

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

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

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

        2. ну и плюс контейнер див по умолчанию растягивается на 100%, то есть на всю доступную ширину

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *