Делаем адаптивное видео для сайта на CSS
 | |
| Здесь разберем как на сайте поставить плеер и он будет адаптивный и смотреться корректно на всем аппаратах или разных размерах монитора. Думаю все сталкивались с таким, что зайдя в кино сайт или новостной портал с компьютера, то там все корректно выводит плеер. Но стоит на этот же сайт выйти смартфона, то уже не корректно выводит и показывает пол плеера. Здесь выставим стили, чтоб на всех мобильных аппаратах выводился корректно полностью плеер, а точнее его экран. Если у вас видео сайт или просто не размещаете видео на своём сайт, то эта статья вам ну нужна и вы не теряя время можете проходить дальше, в другом случае я вам покажу как сделать адаптивным своё видео. Так как часто веб мастер использует видео ролики в разном материале, это может быть как видео уроки или различные материалы. То он должен понимать, что в современном мире большинство людей выходит с различных аппаратах. Что если они увидят, что будет не выводить полностью, то больше этот ресурс он не посетит. Но и нужно также во внимание брать поисковые системы, что также уже создали алгоритмы под эту тему. Но теперь вы можете сделать как нужно, но главное это не сложно под видео настроить стили в CSS. После как настроите, вы будете выставлять плеер и он уже автоматически будет адаптивный, так как заблаговременно вы выставили стили. Обычно код видео выглядит так: Код <iframe width="560" height="340" src="ссылка на видео" frameborder="0" allowfullscreen></iframe> Я этот код изменил таким образом: Код <iframe width="auto" height="auto" src="ссылка на видео" frameborder="0" allowfullscreen></iframe> Если вы внимательны то в коде изменился размер и высоте и ширине я выставил auto, это для того что бы видео выводилось по пропорциям. Этого конечно не достаточно что бы видео было адаптивным оно просто будет в маленьких ровных пропорциях, а для адаптивности мы заключим код плеера в блок. Код <div class="video-demo-adaptivnost"> <iframe width="auto" height="auto" src="ссылка на видео" frameborder="0" allowfullscreen></iframe> </div> Теперь к блоку с помощью классов мы пописываем стили и делаем наше видео всё таки адаптивным. Код .video-demo-adaptivnost { position: relative; padding-bottom: 56.25%; height: 0; overflow:hidden; } .video-demo-adaptivnost iframe, .video-demo-adaptivnost object, .video-demo-adaptivnost embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } Вот теперь у нас видео адаптивное и изменяя размер экрана видео будет под него подстраиваться. Источник: d-melochi.ru | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
