| Kosten | Суббота, 21 Июля 2018, 20:28 | Сообщение 1 |
| Как можно чаще можно встретить в любой статье видео плеер, который закреплен за материалом. И здесь безусловно нужно сделать так, чтоб он корректно отображался на мобильных телефонах. Клиентские видео плееры используют алгоритмы адаптивного показа для оптимизации качества обслуживания пользователей. Так, вот вы можете это сделать, подключив стили, которые будет отвечать за его корректность, чтоб на любом формате он смотрелся, как на большом мониторе.
Несмотря на обилие недавно предложенных схем, современные алгоритмы страдают от ключевого ограничения, так как они используют фиксированные правила управления на основе упрощенных или неточных моделей среды развертывания.
Видеобуфер часто ограничен по размеру из-за ограничений пространства на устройстве или из-за ограничений доступа со стороны владельцев контента. Таким образом, буфер может быть временно заполнен, и в этот момент больше не будет загружено видео, пока из буфера не будет удалено больше уже воспроизводимого видео.
Этот представленный способ, отлично подойдет для вставки видео через фрейм, на такие плееры, как сайта в контакте или Youtube.
Первый вариант: Адаптивное видео с шириной 100% под iframe
CSS
Код .video {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Второй вариант: Идет под ставки iframe, object и embed
Как видим, второй вариант более разнообразен на плееры, что по первому, просто кто то с ютут заливает на сайт, и 2 вармант, это отличное предложение под адаптивность плеера.
А вот второй вариант, он больше подойдет на тематические ресурсы, как кино онлайн или другме плозадки, где присутствуют разнообразные плееры с разных источников и разными ставками.
HTML
Код <div class="video-responsive">
<iframe width="auto" height="auto" src="Ссылка на видео ролик" frameborder="0" allowfullscreen></iframe>
</div>
CSS
Код .video-responsive {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow:hidden;
}
.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Только после установки ваши видео ролики станут адаптивными на любой размер монитора или экрана мобильного телефона. Где безусловно с легкостью будут видоизменяться в зависимости от реального размеров, где находится, а точнее родительского блока.
Также рекомендую прочесть материал Адаптивный видеоплеер для вашего сайт от Angerfist.
| | Страна: (RU) |
| |
| Kosten | Вторник, 24 Июля 2018, 07:29 | Сообщение 2 |
|
| Также есть не очень сложный способ, где при его использование все плеер будет четко и автоматически подстраиваться под размер окна браузера и главное, это безусловно корректно показывать при различном разрешении экрана.
Вот так это делается:
Первое, что делаем, это размещаем код внутри блока. Где аналогично, нужно блоку присвоить класс, ну например - pleersa_gukan.
Код <div class="pleersa_gukan">
<iframe width="560" height="315" src="https://www.youtube.com/embed/t9SJyZccE4w?ecver=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
CSS
Остается выставить наши оригинальные стили, которые также универсальные, что будут прекрасно адаптировать размер плеера сайта YouTube.
Код .pleersa_gukan{
overflow:hidden;
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
}
.pleersa_gukan iframe {
position absolute;
width:100%;
height:100%;
left:0;
top:0;
}
Выходит так, что выставляем под адаптивность наш родительский блок, а сам плеер делаем с абсолютным позиционированием и растягивается по длине и ширине относительно родителя.
| | Страна: (RU) |
| |
