Адаптивное 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%, но пропорции тогда терялись. А при использовании конструкции, которая описана выше, я добился нужного результата.

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

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Комментарии: 5

  1. Игорь

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

    • dimadv7

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

    • Олеш

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

  2. Игорь

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

    • dimadv7

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

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