ZorNet.Ru — сайт для вебмастера » HTML и CSS » Адаптивная вёрстка CSS для видео плеера

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

Адаптивная вёрстка CSS для видео плеера
Не секрет, что на сайте обязательно должно быть адаптивный плеер под видео, что можно сделать с применением CSS, что будет корректно сотрется. В статье рассмотрим несколько вариантов об несколько небольших, но очень актуальных штук, а именно как веб мастеру или кто устанавливает на сайте плеер, то по умолчанию делаем его отзывчивым, или адаптивным, так понятнее для многих. Где пользователю или гостям сайта было удобно просматривать ролики, как с монитора, так и с гаджет.

Здесь задействует видео с платформы YouTube, но главное, это iframe - это то, с чего начинается код плеера, что касается второго варианта, так как только он под iframe сделан. Где идет класс adaptivnoye_video_css, где полностью отвечает за формацию видео, а значит вы изначально можете поставить то значение, которое вам нужно. Хотя если рассматривать оба варианта, то они больше резиновый, что означает, это где плеер прописан будет, то по ширине и длине он автоматически расположится.

Если у вас на сайте только присутствуют от YouTube, то вам нужно только прописать код с последствием вписать стили в CSS, где идет немного, но все очень качественно выводит каркас плеера с видео роликами.

Адаптивное видео для сайта через стили CSS

Начнем:

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

Код
<iframe width="560" height="315" src="https://www.youtube.com/embed/ohyLoDOUCoM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Но это больше всего сделано и настроено под заданный код.

Отзывчивая (адаптивная) высота плеера YouTube

На счет адаптивности идет 2 варианта:

Берем код плеера на YouTube и на нем все будет показано, где будет представлена demo страница, что можно реально посмотреть, как все изначально смотрится, а также на всех мобильных аппаратах.

HTML

Код
<div class="adaptivnoye_video_css">
<iframe width="560" height="315" src="https://www.youtube.com/embed/sJJlvAVeZO4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

CSS

Код
.adaptivnoye_video_css {  
  position: relative;  
  padding-bottom: 56.25%;  
  height: 0;  
  overflow:hidden;  
}  
   
.adaptivnoye_video_css iframe,  
.adaptivnoye_video_css object,  
.adaptivnoye_video_css embed {
  position: absolute;  
  top: 0;  
  left: 0;  
  width: 100%;
  height: 100%;  
}

Кто знаком с плеерами, то знает, что не все начинаются со значение iframe, также есть object, что мы видим также присутствует в стилистике CSS, а значит также автоматически становится отзывчивыми для просмотра.

Демонстрация

Второй вариант:

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

HTML

Код
<div class="responsive-player">
<iframe width="560" height="315" src="https://www.youtube.com/embed/u9B0Bl6ayOE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

CSS

Код
.responsive-player{
  overflow:hidden;
  position:relative;
  padding-bottom:56.25%;
  padding-top:28px;
  height:0;
}
.responsive-player iframe {
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
}

Вот, где нужно обратить внимание, так это блок, который изначально идет основными параметрами padding-bottom:56.25%. Где будет задаваться высота для родительского блока плеера, где само видео идет в соотношение сторон 16:9. И так, если видео имеет соотношения 4:3, то смотрим на параметр, где видим padding-bottom:75%.

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

Демонстрация
2020-01-24 Загрузок: 2 Просмотров: 920 Комментарий: (16)

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

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

Оставь свой отзыв

Комментарий: 16
avatar
nik96ek98 2020-01-24 17:291
0
ребята не как не могу настроить плеер куда вписывать html код , если при добавлении тогда система не пропускает пишет Не заполнено поле "Ссылка на SWF файл материала" , или содержит ссылку на недопустимый адрес ресурса я пытаюсь это сделать под видео раздел, может не тот материал выбрал, помогите решить проблему
Kosten
Kosten 2020-01-24 17:422
0
Здесь все очень просто, нужно прописать стили и потом код плеера ставить с данным классом. Где все должно быть нормально и без ошибок.

А если попробовать установить плеер от ютуб, то также ошибку выдает?

Первый вариант идет на несколько вариантов плеера, где в CSS они указаны, начиная с привычного iframe.
avatar
nik96ek98 2020-01-24 17:463
0
Если просто вставляю iframe от ютуб то все нормально но если добавить к нему <div class="adaptivnoye_video_css"> то не заполнено поле, это в добавление материалов ВИДЕО . не знаю как можно реализовать адаптивность iframe в ВИДЕО
-SAM-
-SAM- 2020-01-26 12:5116
0
Там нужно смотреть шаблон страницы, где у вас выводиться видео. Если ставить в поле $EOBJECT$ тот код, что идёт в материале, то нужно просто ставить iframe, а класс смотреть у того блока, что идёт в шаблоне (по умолчанию в uCoz там идёт .vep-video-block - его и использовать вместо .adaptivnoye_video_css или .responsive-player).
avatar
nik96ek98 2020-01-24 17:494
0
Пробывал эти коды
Код
.ifadapt {
  height: 0;
  position: relative;
  padding-bottom: 56.25%;
}
.ifadapt iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}


Код
<div class="ifadapt">
  <iframe class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>


он работает если просто кодом вставить куда то а в добавлении в модуле видео не работает пишет все тоже самое
Kosten
Kosten 2020-01-24 17:545
0
Проверял все работает, вероятно с модулем видео идет грызня, ведь эти коды в большинстве идут под материал, где закрепляют видео к тексту.
avatar
nik96ek98 2020-01-24 17:596
0
Я это понял но блин в мобильной версии чуть чуть бы поуже материал... Блин что бы придумать
Kosten
Kosten 2020-01-24 18:028
0
Но вы поняли, и в чем причина, это на мобильных аппаратах не корректно показывает или просто ошибку стало не выдавать.
Kosten
Kosten 2020-01-24 18:017
0
avatar
nik96ek98 2020-01-24 18:039
0
спасибо буду пробывать
avatar
nik96ek98 2020-01-24 18:0910
0
Все рабочии но не для модуля ВИДЕО
avatar
nik96ek98 2020-01-24 18:1111
0
наверно проще какой то модуль переделать под видео и использовать эти варианты для вывода видео, но опять же есть ограничения по количеству материалов. Не кто не в курсе где и сколько ограничение?
Kosten
Kosten 2020-01-24 18:1412
0
А, что на других модулях корректно все показывает и выводит. Дайте ссылку на сайт, и вообще. Что вы хотите создать, это чисто видео, или видео, которое подключено к описанию.
avatar
nik96ek98 2020-01-24 18:1813
0
Ссылку давать бесмысленно к сайту в данный момент присоединяется sll и он не доступен, мне нужно что бы на странице материалов и коментариев к нему в модуле ВИДЕО видео добавленное через ютуб выводилось адаптивным а то получается если с телефона смотришь то оно больше сайта.
Kosten
Kosten 2020-01-24 18:2314
0
Просто каталог видео мне не известен, там может вообще просто ссылку от ютуб ставишь, чтоб видео вывести, и автоматически становится адаптивным.
-SAM-
-SAM- 2020-01-26 10:1915
0
Материал вообще к системе uCoz отношения не имеет. Просто описано, как выводить плеер и делать его адаптивным. Ничто не мешает переписать шаблон любого модуля на uCoz и это подключить (в шаблон пойдут коды из материала, сделать доп. поле и в него ставить лишь идентификатор для видео с YouTube).
Системные ограничения описаны здесь: ucoz.ru/limits [!]
P.S.: странный способ решать подобные проблемы свои, забивая такими комментариями материал (а ссылки на сайт - это вообще спам уже будет). Если есть вопросы конкретно по системе uCoz, то есть форум ( /forum/115 ).
avatar