Адаптивная вёрстка CSS для видео плеера
 | |
| Не секрет, что на сайте обязательно должно быть адаптивный плеер под видео, что можно сделать с применением CSS, что будет корректно сотрется. В статье рассмотрим несколько вариантов об несколько небольших, но очень актуальных штук, а именно как веб мастеру или кто устанавливает на сайте плеер, то по умолчанию делаем его отзывчивым, или адаптивным, так понятнее для многих. Где пользователю или гостям сайта было удобно просматривать ролики, как с монитора, так и с гаджет. Здесь задействует видео с платформы YouTube, но главное, это iframe - это то, с чего начинается код плеера, что касается второго варианта, так как только он под iframe сделан. Где идет класс adaptivnoye_video_css, где полностью отвечает за формацию видео, а значит вы изначально можете поставить то значение, которое вам нужно. Хотя если рассматривать оба варианта, то они больше резиновый, что означает, это где плеер прописан будет, то по ширине и длине он автоматически расположится. Если у вас на сайте только присутствуют от YouTube, то вам нужно только прописать код с последствием вписать стили в 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> Но это больше всего сделано и настроено под заданный код.  На счет адаптивности идет 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%. Теперь вы знаете, как можно самостоятельно сделать плеер автоматически. Ведь очень много материала идет, где к нему закреплен видео ролик, или просто просмотр видео в кино сайтах, где нужно обязательно выставлять все ролике, чтоб просматривались корректно на любом аппарате или компьютере в корректной форме. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 16 | |
|
| |
