Адаптивное видео на сайте с помощью CSS
 | |
| Так как сайты стали адаптивные под мобильные аппараты, то плеер для просмотра, также должен быть резиновым, что разберем, как правильно сделать его адаптивным. Это статья, для тех, кто еще не слышал или не знает про адаптивный дизайн сайта, но в этой статье узнаем как можно не сложно самостоятельно в ручном режиме сделать адаптивный плеер, что корректно показывает на всем мобильных носителях и мониторах. Теперь нам нужно не дизайн сделать адаптивный, а плеер, ведь под фильмы онлайн идут с разных видео площадок, вообще много сайтов где можно взять код дна плеер для дальнейшего просмотра. Здесь смысл простой, это адаптивность элемента, для того, чтобы гости и пользователи сайта просматривали с комфортом, а точнее делаем корректный показ как на самом большом мониторе, так и на экране самого небольшого экрана. Для понятия, чтоб все элементы сайта должны иметь возможность масштабирования, а точнее происходит автоматическое изменения своего размера, которое зависит от размера экрана. Здесь оказалось не так сложно для кода вставки видео, где изначально нужно поместить в специальный контейнер, у нас будет adaptivny-video-rolik:  HTML Код <div class="adaptivny-video-rolik"> <iframe width="834" height="428" src="https://www.youtube.com/embed/aO62IcEfA7o" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> CSS Код .adaptivny-video-rolik { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .adaptivny-video-rolik iframe, .adaptivny-video-rolik object, .adaptivny-video-rolik embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } На этом вся установка, где видим, что только задействовали CSS. Демонстрация Так то можно поставить точку, ведь все адаптивное видео сделано, так как сделали видеоролик по умолчанию растянутым по максиму по ширине экрана. Но так бывает, что для кого то этот вариант неудобен, хотя это безусловно самый актуальный вариант. Здесь просто требуется, чтоб на широким или самых больших экранах ролик изначально имел размер ограничений. То здесь для этого нужно прописать код вызова видео ролика в заданный контейнер, под названием videorolika-pudsamed, что все также будет корректно выводить.  HTML Код <div class="videorolika-pudsamed"> <div class="adaptiv-primer-videorolika"> <iframe width="715" height="438" src="https://www.youtube.com/embed/QnCprFUjGZM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> CSS Код .videorolika-pudsamed { width: 635px; max-width: 100%; margin: 1em auto; } И остается ознакомиться с двумя важными замечаниями: В самом коде, что предоставляет видео, то здесь постоянно нужно указывать значения параметров width и height. А это нужно прописать конкретные значения, что в пикселях идут, либо поставить "auto", где автоматически установка произойдет. До этого рассматривали адаптивную рамку в виде ноутбука, что идет под оформление под плеер с YouTube. При установках вы уже знаете формам плеера, это квадратный или в ширине меньше, чем по длине. А здесь нужно сохранить оригинальное соотношение сторон, для этого указываем для параметра контейнера videorolika-pudsamed значение 75 процентов в случае, если видео в формате 4:3 и 56.25% для формата 16:9, что можно посмотреть на demo, которое закреплено за материалом. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 8 | |
| |
