Адаптивное youtube видео на landing page

Адаптивное видео youtube. Добрый день, друзья. Недавно, нужно было подключить видео с Youtube на landing page, но так как сайт был адаптивным, то часть плеера на смартфонах не вмещалась, ведь его размеры были значительно шире. Подумал, что кто-то тоже может столкнуться с этой проблемой и поэтому решил написать небольшую заметку на эту тему.

Адаптивная верстка видео

На самом деле, очень часто спрашивают, как добиться того, чтобы видео вставленное с Youtube было адаптивным. Возможно есть какие-то более "красивые" способы, но я воспользовался css стилями и получился небольшой лайфхак :) Если вы подскажете более "красивый" способ, буду только рад :)

Суть такова, что мы оборачиваем код, например, в div с классом videoWrapper, получается так:


<div class="videoWrapper">;
   <iframe width="560" height="315" src="https://www.youtube.com/embed/ELYrAPHxEuI" frameborder="0" allowfullscreen&gt;&lt;/iframe>
</div>

А затем добавляем следующие стили:

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

.videoWrapper iframe,.videoWrapper object, .videoWrapper embed{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

Конструкцию подсмотрел на одном из форумов. До этого пробовал просто для iframe, object, embed задать максимальную ширину 100%, но пропорции тогда терялись. А при использовании конструкции, которая описана выше, я добился нужного результата.

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

5 комментариев

  1. Игорь

    Здравствуйте!
    Есть видео с ютуба которое находиться в модальном окне.
    Подскажите, пожалуйста, как сделать что бы оно(видео) автоматически начинало проигрываться при запуске модального окна ?

    1. dimadv7

      Здравствуйте. Я не знаю даже, никогда не реализовывал подобного эффекта. Наверное нужно вешать событие на клик кнопки, чтобы в нужное место прописывалась ссылка в какой-нибудь div в модальном окне. Но вы сталкнетесь и с проблемой закрытия, например, при закрытии модального окна, видео все равно будет проигрываться. Если его не остановить. Все при помощи js, думаю, делается.

    2. Олеш

      Есть готовые легковесные библиоткеи для этого, достаточно загуглить

  2. Игорь

    Спасибо за наводку , буду искать дальше )

    1. dimadv7

      Отпишите, если разберетесь

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