Адаптивное 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. Дмитрий Давыдов

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

    2. Дмитрий Давыдов

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

  2. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

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

 

© 2014 — 2020, Smartlanding.biz. Все права защищены. Любое использование материалов допускается только с указанием активной ссылки на источник. Политика конфиденциальности