» »

Адаптивный видеоплеер для вашего сайта


Недавно запарился темой что тоже надо делать адаптивный дизайн для сайта, и так как у меня сайт по тематике музыкальное видео, то пришлось думать как найти простой способ сделать резиновыми встроенные клипы с You Tube с сохранением пропорций и автоматически независимо от того каким методом вы адаптируете сайт. Вообщем нашёл способ которым поделюсь, может его уже все знают но я подобного материала не увидел на этом сайте. Короче для владельцев кино сайтов точно подойдёт.
При вставке содержимого из внешнего источника код обычно содержит iframe, типа
Код
<iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>
, не обязательно с youtube, этот iframe дает внешнему контенту возможность отображаться на вашем веб-сайте, так как включает URL, указывающий на источник контентного потока.

1.Чтобы сделать встроенный контент адаптивным, вам придется добавить вокруг iframe содержащий упаковщик. У вас получится следующая разметка:
Код
<div>
  <iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0">
  </iframe>
</div>

2.Следующий шаг – добавить стили этому новому упаковщику и iframe внутри него.
Во-первых, назначаем стили содержащему упаковщику с классом .video-container, можно в таблице стилей применить следующий фрагмент кода:
Код
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

Он делает следующее:

Установка position на relative дает возможность применить абсолютное позиционирование к самому iframe, до чего мы вскоре доберемся.

Значение padding-bottom высчитывается из соотношения размеров видео. В данном случае форматное соотношение составляет 16:9, что означает высоту в 56,25% от ширины. Для видео с соотношением 4:3 устанавливаем padding-bottom на 75%.

Значение padding-top установлено на 30 пикселей, чтобы оставалось место под хром — это особенность видеороликов YouTube.

height установлена на 0, так как нужную высоту элементу дает padding-bottom. Мы не устанавливаем ширину, потому что она будет меняться автоматически вместе с адаптивным элементом, содержащим этот div.

Установив overflow на hidden, мы гарантируем, что любой «вылезший» за этот элемент контент будет скрыт из вида.

Нам также нужно назначить стили самому iframe. Добавьте в свою таблицу стилей следующее:
Код
.video-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

Целью этого кода являются iframe’ы внутри контейнеров с классом .video-container. Давайте разберем его:

Абсолютное позиционирование использовано потому, что у содержащего элемента высота равна 0. Если бы iframe был нормально позиционирован, мы тоже назначили бы ему высоту в 0.

Свойства top и left помещают iframe точно в содержащий элемент.

Свойства width и height гарантируют, что видео займет 100% пространства, используемого содержащим элементом (который на самом деле установлен с отступом).

Если это сделать, видео отныне станет менять размер вместе с шириной экрана. Вот как это будет смотреться (скриншоты сделал со своего сайта в доказательство что работает):
Адаптивный видеоплеер

Вообщем это в CSS:
Код

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

ну и в итоге если код плеера в $MESSAGE$:
Код
<div class="video-container">$MESSAGE$</div>

либо упаковываем сразу код плеера, не знаю как у вас реализованно.

Источник http://webformyself.com/
13.03.2016 Просмотров: 717 Комментарий: (28)

Поделиться в социальных сетях

Материал разместил

Комментарий: 28
Kosten
Kosten 13.03.2016 01:031
0
Angerfist, вообще в первые вижу, чтоб он под адаптацией был на мобильные устройства, думал такого вообще нет, а вот вижу есть.
Angerfist
Angerfist 13.03.2016 01:082
0
Да есть,я сам мучался когда адаптировал...Решил тебе помочь если честно
у тебя же кино сайт, работает 100% на моём сайте проверял через смартфоны и онлайн Responisator
Kosten
Kosten 13.03.2016 01:186
0
Angerfist, от души за это, просто сейчас нужно его немного поднять а потом и за адаптацию праться, но думаю плеер в последнее учередь делать, так как весь шаблон нужно с начало адаптировать и тянуть нельзя, возможно скоро алгоритмы запустят, сейчас пока сквозь мальцы смотрят и реагируют по жалобе, когда их много.
tsakonter
tsakonter 13.03.2016 01:093
0
Так это только под ютуб или что то пропустил, туда не поставишь скрипт от другого плеера, но по идее можно, не знаю, нужно прочесть, кажется понятно написано.
А так спасибо, давно что то вроде этого искал.
Angerfist
Angerfist 13.03.2016 01:114
0
Коды плееров в iframe любые, по крайней мере я тестил и с rutube
FeStemBer
FeStemBer 13.03.2016 01:155
0
Цитата Angerfist
Коды плееров в iframe любые

Так это хорошо, почти все начинаются с этого.
ucozmental
ucozmental 13.03.2016 01:217
0
Но как то к плеером не отношусь, просто посмотрел на уникальность, думаю это первый материал, который написан оригинально, и костену не переписывать. biggrin
Kosten
Kosten 13.03.2016 01:278
0
Да заметил и написано понятно, отличный материал, думаю многим пригодиться.
Tergran
Tergran 13.03.2016 01:339
0
Вот за это спасибо, много искал как можно сделать, думал на блогах описано, так и не нашел, не ожидал, что здесь будет.
csretven
csretven 13.03.2016 01:4510
0
Вы проверяли на этом сайте www.responsinator.com, также все на нем проверял, все быстро и переходить прямо в нем можно на страницы, просто удобен.
Angerfist
Angerfist 13.03.2016 01:4812
0
Да и на нём тоже, в первую очередь конечно же на самом смартфоне
Angerfist
Angerfist 13.03.2016 01:4711
0
Согласен что сначала адаптировать надо шаблон, многие делают через медиа запросы, ну а видео контент один их этапов, я например чтоб проще было адаптировал всё что можно начиная с блоков, самой таблицы и слайдера. Вообщем эффект растяжения под все мобильные устройства с сохранением пропорций.
Angerfist
Angerfist 13.03.2016 01:5313
+3
http://quirktools.com/screenfly/ и http://mattkersley.com/responsive/ еще пару сервисов.
Кстати про адаптацию картинок.
Html
Код
<div class="container">
  <img src="image01.jpg" width="960" height="640" />
</div>

CSS
Код
div.container {
  width: 96%;
  max-width: 960px;
  margin: 0 auto; /* чтобы отцентрировать контейнер */
}
img {
  width: 100%;
  height: auto;
}
Сафрон
Сафрон 13.03.2016 01:5414
0
Так реально показано, что плеер адаптирован, почему то не когда не думал, что его можно сделать. Просто некоторые проверял, такие где сразу онлайн по 30-40 хостов, и там адаптацией не было.
1 2 »
avatar