Как сделать видео на сайте адаптивным
Вы здесь: Главная — HTML — HTML 5 — Как сделать видео на сайте адаптивным
Независимо от того, вставляете ли вы на сайт видео html5 тегом video или встраиваете с ютуба через iframe, оно должно хорошо адаптироваться под различные устройства.
Вставить и адаптировать HTML5 видео
Для вставки видео на сайт, нужно в HTML разметке внутри блока обертки, прописать тег video, внутри которого через src подключить видео-ролик. Атрибут controls, дает возможность управлять видео. Атрибут poster указывает ссылку на превью-картинку к видео-ролику. Впрочем можно обойтись и без картинки, в таком случае, браузер покажет в плейере первый кадр видео.
<div>
<video src="video/travaho.mp4" controls poster="video/travaho.jpg">
Ваш браузер не поддерживает HTML5 видео.
</video>
</div>
Если оставить у видео фиксированные размеры, то на экране с разрешением меньше, чем 640 пикселей по ширине, появится горизонтальная полоса прокрутки и может поломаться верстка.
Зададим классу movie ширину 100%, а высоту пусть браузер вычислит автоматически. Ограничим ширину плеера до 500 пикселей.
.movie {
width: 100%;
height: auto;
margin: 0 auto; // выравнивает по центру по вертикали
display: block;
max-width: 500px;
}
Теперь, благодаря нескольким строчкам CSS кода, видео стало адаптивным и пропорционально подстраивается под любую ширину экрана без горизонтальной полосы прокрутки.
Адаптивное видео с Ютуба
Все-таки на большинстве сайтах, мы видим встроенное видео с Ютуба. Как вы понимаете, в HTML коде для встраивания видео, фиксированные размеры. Значит, сделать его адаптивным – задача веб-мастера.
<iframe src="https://www.youtube.com/embed/fn_JrXerhUg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Мы не можем напрямую повлиять на ширину iframe, как в первом случае. Зато можем создать блок-контейнер и задать ему CSS правила.
<div>сюда вставить код iframe</div>
Чтобы видео адаптировалось под ширину блока-контейнера с сохранением пропорций, зададим классу movie-container следующие свойства:
.movie-container {
position: relative;
padding-bottom: 56.25%; // сохраняет пропорции
height: 0;
overflow: hidden;
display: block;
}
Мы расположили iframe относительно контейнера и приняли меры предосторожности на случай переполнения контейнера.
Сейчас видео с ютуба стало адаптивным, но оно растягивается на всю ширину браузера. Нужно ограничить размеры видео на странице.
Создадим ещё один блок-обертку, который ограничит размеры и отцентрирует видео.
.movie-fixed {
max-width: 500px;
margin: auto;
}
HTML разметка целиком.
<div>
<div>
<iframe src="https://www.youtube.com/embed/fn_JrXerhUg" frameborder="0" allow="accelerometer;
<autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
Адаптивное видео на Bootstrap
У Bootstrap уже есть готовые классы, чтобы видео было адаптивным. Один класс присваивается самому объекту:
<video>
<iframe>
<object>
<embed>
Два других класса – блоку-обертке.
<div>
<iframe src="URL" allowfullscreen></iframe>
</div>
-
Создано 25.09.2019 10:28:07 -
Создано 25.09.2019 10:28:07
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
-
Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a> Она выглядит вот так:
-
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>Она выглядит вот так: Как создать свой сайт
- BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]
html — Список Адаптивный IFrame видео по центру по горизонтали и не более ширины
Я прочитал значительное число должностей в связи с отзывчивой интеграцией IFrame как здесь и далее в гугле, но ничего не решить мою конкретную проблему. Я бросал в полотенце и мне нужна помощь.
Цель:
Чтобы создать адаптивный горизонтально ориентированный центр оправдан список из трех (или более) видео Youtube , который имеет максимальную ширину, и макс-высота (400 х 225) , но может усадку ниже значений макс ответно.
Где я:
Я создал отзывчивый вертикально ориентированный список из трех YouTube видео каждых в пределах своего отзывчивого контейнера; Однако, я не могу за жизнь мне получить Iframes относительно ориентации по горизонтали и сосредоточенных в видео контейнера, оставаясь отзывчивым.
То , что я пробовал:
(поплавок: левый, поплавок: справа; дисплей: встроенный блок; выравнивание: левый, выравнивание: справа; отступы: маржинальный 🙂 Т.Д. Я подключил CSS в сам HTML, и в CSS включаемый файл и испытал много перестановок и комбинаций из них все безрезультатно. Не выдерживая, я исследовал это, на Google, и в то время как я нашел подобные сценарии, я не встречал решение этой конкретной вариации.
Результат:
я могу либо сделать , не реагирующий горизонтально центр ориентированного списка видео , выложенным , как это должно выглядеть, но отказывается изменить размер ответно, или я могу сделать максимальную шириной отзывчивого список видео , которые изменяют размер правильно с тем, что окном просмотра этого времени если смотреть в, но упорно выравнивается по левому краю и вертикально ориентированным. Я просто не могу показаться , чтобы получить лучшее из обоих.
Код:::
С помощью CSS включает в себя:
.video{ color: #927c5a; font-family: Impact, Impact,charcoal, sans-serif; font-size: 19px; font-weight: normal; height: auto; width: 100%; text-align: center; margin-bottom: 10px; display: inline; float: left; border: 1px solid blue; } .videoWrapper { position: relative; padding-bottom: 205px; padding-top: 25px; height: 0; max-width: 400px; max-height: 225px; border: 1px solid red; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: 400px; max-height: 225px; border: 1px solid green; }
Из HTML файла:
<div class=video>
<div class=videoWrapper>
<iframe src=https://www.youtube.com/embed/o6l14SkYtaY?rel=0 frameborder=0 allow=autoplay; encrypted-media allowfullscreen></iframe></div>
<div class=videoWrapper>
<iframe src=https://www.youtube.com/embed/o6l14SkYtaY?rel=0 frameborder=0 allow=autoplay; encrypted-media allowfullscreen></iframe></div>
<div class=videoWrapper>
<iframe src=https://www.youtube.com/embed/o6l14SkYtaY?rel=0 frameborder=0 allow=autoplay; encrypted-media allowfullscreen></iframe></div>
</div>
Адаптивное видео для сайта с помощью CSS
Как часто при использовании встроенного видео из различных источников у себя на сайте или блоге, вам приходилось подгонять размер того или иного видеоролика, предварительно изменяя заданные значения ширины и высоты плеера? Думаю, что большинство блогеров именно так и поступают, раз за разом, в ручную прописывают необходимые параметры, для того чтобы встроенное виде не выходило за границы блока, в котором оно расположено.
А ведь существует довольно простое и изящное решение, существенно облегчающее этот процесс. Приведу простой пример и в довесок нему готовый набор правил CSS, для реализации абсолютной отзывчивости встраиваемого видео через iframe, object и embed с популярных видео-сервисов, таких как YouTube, Vimeo и других.
Для того чтобы видео автоматом подстраивалось под размеры родительского блока, достаточно в таблице стилей CSS, заблаговременно создать отдельный класс и определить все необходимые свойства для создания «резинового» контейнера, в котором и будет в последующем располагаться встроенный видеоролик. А так как видео-сервисы предлагают различные методы вставки видео на сайт, iframe, object и embed, следует учесть эту особенность, и задать стили для всех этих вариантов сразу. Тем самым в дальнейшем, мы избавим себя от лишних и ненужных телодвижений.
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%;
} |
.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%; }
Как видите всё очень просто, задаём относительное позиционирование для родительского блока и абсолютное относительно родителя, для встроенных элементов, определив им при этом, процентные значения ширины width: 100%; и высоты height: 100%;, чтобы в итоге видеоплеер смог растягиваться или сжиматься в соответствии размеров основного контейнера.
Со стилями разобрались, остаётся создать div контейнер с предопределенным классом, в нашем случае это class="video-responsive", затем вставить внутрь этого контейнера код нужного вам видеоролика, и всю эту конструкцию прописать там где вы планируете демонстрировать ваши и чужие видео-шедевры)).
<div> <iframe src="ссылка на видео" frameborder="0" allowfullscreen></iframe> </div> |
<div> <iframe src=»ссылка на видео» frameborder=»0″ allowfullscreen></iframe> </div>
Вот и всё! Теперь все ваши видеоролики станут по-настоящему отзывчивыми(резиновыми) и будут легко видоизменяться в зависимости от размеров родительских блоков, а так же при просмотре на экранах различных пользовательских устройств.
Для того чтобы увидеть что мы получили в конечном итоге, пройдите на страницу с демо и попробуйте изменять размеры окна браузера в ту или иную сторону. Там же сможете посмотреть на весь фарш исходников:
Возникнут вопросы, не стесняйтесь, задавайте. Если вам известен более надёжный и простой способ создания адаптивного блок с встроенным видео, пишите в комментариях, будет очень интересно рассмотреть и другие варианты.
PS: После того, как статья увидела свет, в комментариях, lakispy внёс важные поправки, спасибо ему за это, каюсь, я как-то упустил из виду:
Для видео ВКонтакте iframe параметры ширины и высоты обязательны и если они не заданы, то встраиваются минимальные значения автоматически при загрузке страницы с фреймом. Так что добавляйте параметры в фрейм
С Уважением, Андрей .
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
Адаптивное видео на сайте с помощью CSS
Так как сайты стали адаптивные под мобильные аппараты, то плеер для просмотра, также должен быть резиновым, что разберем, как правильно сделать его адаптивным. Это статья, для тех, кто еще не слышал или не знает про адаптивный дизайн сайта, но в этой статье узнаем как можно не сложно самостоятельно в ручном режиме сделать адаптивный плеер, что корректно показывает на всем мобильных носителях и мониторах.Теперь нам нужно не дизайн сделать адаптивный, а плеер, ведь под фильмы онлайн идут с разных видео площадок, вообще много сайтов где можно взять код дна плеер для дальнейшего просмотра.
Здесь смысл простой, это адаптивность элемента, для того, чтобы гости и пользователи сайта просматривали с комфортом, а точнее делаем корректный показ как на самом большом мониторе, так и на экране самого небольшого экрана.
Для понятия, чтоб все элементы сайта должны иметь возможность масштабирования, а точнее происходит автоматическое изменения своего размера, которое зависит от размера экрана. Здесь оказалось не так сложно для кода вставки видео, где изначально нужно поместить в специальный контейнер, у нас будет adaptivny-video-rolik:
HTML
Код
<div>
<iframe 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>
<div>
<iframe 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, которое закреплено за материалом.
Демонстрация