|
Адаптивное YouTube видео для сайта на CSS
|
|
| Kosten | Среда, 04 Июля 2018, 23:29 | Сообщение 1 |
| По запросу, как сделать адаптивным видео плеер от хостинг YouTube, в первой же заметки написано, где все делается на стилистике CSS. Видео ролики с платформы YouTube прописывается на интернет ресурс, где идет ставка кода с применением тэга iframe либо с помощью тэга embed, под старый код. Так как много материалов идет с прикрепленным видео, оно основном идет от хостинг YouTube. То здесь сразу изначально настроить, чтоб при установки только оставалось прописать в правильный класс. который и будет отвечать за корректный показ видео.
Адаптивные потоковые технологии позволяют оптимально использовать потоковое видео для широкого спектра устройств с широким набором скоростей соединения. Если потоковое видео является критически важным для вашего предприятия, и сегодня вы не используете адаптивную потоковую передачу, или вскоре для ее реализации, вы уже находитесь за кривой. В этом документе описывается, что такое адаптивная потоковая передача, идентифицирует основных участников технологии и обсуждает факторы, которые следует учитывать при выборе технологии.
Качественная ситуация довольно проста. Адаптивная потоковая передача позволяет поставщику видео для создания другого видео для каждого из размеров или устройства экрана, которые он или она хочет настроить. Диаграмма ниже очень просто показывает, как это работает. Как вы можете видеть, мы можем передавать конкретный видео файл в соответствии с конкретными размерами экрана, чтобы зритель всегда получал видео, которое будет выглядеть хорошо.
Например этот код позволяет вставить на сайт видео Иностранцы: стадион в Питере это шедевр:
Код <iframe width="560" height="315" src="https://www.youtube.com/embed/SltMuZJwgNk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Этот вариант позволяет выставить видео-ролик, который еще не адаптивный идет. А точнее, это при изменении размеров браузера, видео не будет уменьшатся.
Адаптивное видео в YouTube
Для того чтобы сделать видео из YouTube адаптивным, нужно сделать следующее:
1. Вставить тэг iframe с видео:
Код <div class="myvideo">...</div>
Так получается:
Код <div class="myvideo">
<iframe width="560" height="315" src="https://www.youtube.com/embed/SltMuZJwgNk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
2. В стилевой файл прописать такой код:
Код .myvideo {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
border:1px solid #ccc;
}
.myvideo iframe,.myvideo object,.myvideo embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
После этого наше видео станет адаптивным.
Отметим что данная технология будет работать и для вставки видео с помощью тэга embed - просто вставляете код видео.
Код <div class="myvideo">...</div>
Адаптивное видео в Vimeo
Данная технология позволяет сделать адаптивным видео и из Vimeo, для этого просто вставляете код с видео
Код <div class="myvideo">...</div>
Адаптивные карты Google и Яндекса
При вставке видео из YouTube использовался тэг iframe, этот тэг используется и в картах Google и Яндекса. Поэтому технология превращения обычного видео в адаптивное, будет действовать и для карт Google и Яндекса.
Код <div class="myvideo">...</div>
В большинстве плееров идет тэг iframe, что этот метод может также сделать видео адаптивным.
Буферизация происходит, когда пользователь не может загрузить видео файл достаточно быстро, чтобы сохранить воспроизведение видео. Большинство видеороликов воспроизводятся со скоростью 24 кадра в секунду, поэтому для подключения к Интернету необходимо загружать не менее 24 кадров в секунду, чтобы избежать буферизации. Адаптивная потоковая передача может разрешить эту ситуацию, «адаптируя» к скорости интернет соединения пользователя.
| | Страна: (RU) |
| |
| Kosten | Четверг, 05 Июля 2018, 01:06 | Сообщение 2 |
|
| Существует множество способов отображения видео на вашем сайте. Вы можете самостоятельно разместить видео и представить его с помощью тега HTML5 video. Возможно, вы используете YouTube или Vimeo, который предоставляет код iframe для отображения видео. Если вы используете стандартное видео HTML5, это сделает видео изображение подходящим для ширины контейнера. Важно, чтобы вы удалили объявление высоты, когда вы это делаете, чтобы соотношение сторон видео поддерживалось по мере его роста и сжатия.
Задача:
Выставить видео с хостинг YouTube на отзывчивый или адаптивный по конструкций сайт. Интернет ресурс меняет ширину на различных размерах монитора или экрана, где также нельзя задать размеры iframe с видео. Здесь обязательно нужно создать и поставить видео в нормальных пропорций, где все корректно будет.
Решение:
Для iframe, все просто, это зависит от высоты, что ее устанавливаем, иначе браузеры выставляют для iframe высоту 150 пикселей. Видео ролик перегрузиться узкой в горизонтальном виде полосы и проиграется в поле размером в половину спичечного коробка. Почти все браузеры отображают iframe, canvas, embed и object с шириной 300px и высотой 150 пикселей по высоте, если не указать размеры.
Изначально нужно поместить iframe в блок div, где уже заданные пропорций. А само видео абсолютно позиционировать в этом div. А вот видео ролик, что в iframe будет увеличиваться и также уменьшаться, и все это в вслед за родительским div, где сохранит корректные пропорции.
HTML:
Код <div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/MDgCQUT7rO0?ecver=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
CSS:
Код .video {position:relative;padding-bottom:56.25%;/*пропорции видео 16:9 */padding-top:25px;height:0;}
.video iframe {position:absolute;top:0;left:0;width:100%;height:100%;} | | Страна: (RU) |
| |
| workman | Четверг, 05 Июля 2018, 17:03 | Сообщение 3 |
| Ребята. Лучше наверное ставить вот так,так как данный код без @media растягивает видео по ширине блока.
Код @media screen and (max-width:640px) {
.video {
position: relative;
padding-bottom: 56.25%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
как это работает тут
Сообщение отредактировал
workman - Пятница, 06 Июля 2018, 21:54 | | Страна: (RU) |
| |
| Kosten | Пятница, 06 Июля 2018, 22:07 | Сообщение 4 |
|
| workman, то что нужно! 
| | Страна: (RU) |
| |
| workman | Суббота, 07 Июля 2018, 11:42 | Сообщение 5 |
|
| Kosten, от души, брат!!!
| | Страна: (RU) |
| |
