Добавить отзывчивый полноэкранный видеофон HTML5 на веб-страницу
Последнее изменение: 18 марта 2021 г. | Исходный код [GitHub] | #CSS #html
CSS позволяет установить фоновое изображение, но в настоящее время не поддерживает добавление фонового видео. Не беспокойтесь, полноэкранное фоновое видео можно легко создать с помощью элемента видео HTML5 и простого CSS.
Первое, что нужно сделать, это добавить элемент в ваш HTML со следующими настройками:
Язык кода: HTML, XML (xml)
Здесь используются два разных видеофайла, webm — лучший формат для веб-видео, но в настоящее время он не поддерживается всеми браузерами, поэтому мп4 используется в качестве запасного варианта. Существует множество бесплатных онлайн-инструментов для преобразования видео в нужный формат для Интернета.
Давайте подробнее рассмотрим другие используемые настройки:
-
постер— изображение отображается во время загрузки видео и в качестве запасного варианта на неподдерживаемых устройствах. -
autoplay— Видео начнет воспроизводиться автоматически после загрузки. -
playsinline— Предотвращает захват видео на экране на мобильных устройствах. -
без звука— Автовоспроизведение видео со звуком является грубым, поэтому мы позаботимся о его отключении. -
цикл– После того, как видео закончится, повторите цикл с самого начала.
Если вы просматриваете HTML-код в браузере, видео должно начать воспроизводиться в исходном разрешении. Чтобы получить полноэкранное фоновое видео, нам просто нужно добавить следующий CSS:
video {
ширина: 100vw;
высота: 100вх;
объект подходит: обложка;
положение: фиксированное;
сверху: 0;
слева: 0;
z-индекс: -1;
} Язык кода: CSS (css) Это устанавливает ширину и высоту видео на 100% области просмотра, а применяя отрицательный z-индекс , мы гарантируем, что другие элементы на странице будут отображаться поверх видео.
Теперь, если мы добавим в HTML еще один элемент, например
Hello World
Язык кода: HTML, XML (xml)
Вы увидите этот текст отображается поверх полноэкранного видео в фоновом режиме.
Если вы добавляете фоновое видео на существующий веб-сайт, содержимое уже должно быть правильно расположено. Для целей этого урока мы можем лучше расположить текст поверх видео с помощью следующего CSS:
h2 {
цвет: #fff;
выравнивание текста: по центру;
поле-сверху: 50vh;
} Кодовый язык: CSS (css) Вот как вы добавляете адаптивный полноэкранный видеофон на веб-страницу. Будем надеяться, что в будущем CSS будет поддерживать фоновое видео так же, как фоновые изображения. До тех пор это решение работает во всех современных браузерах, кроме Internet Explorer (который уже не совсем современный).
Похожие сообщения
#AD Магазин футболок для веб-разработчиков
Отображение видео Vimeo 16:9 в качестве полноэкранного фона на мобильных устройствах (портрет) — Общее — Форум
Holger_H (Хольгер Херрманн)
1
Эй, Webflowers! Кто-нибудь здесь знает, могу ли я использовать HTML-код видео Vimeo, встроенный в мобильный телефон и планшет (портрет), чтобы покрыть весь экран видео, даже если видео имеет соотношение сторон 16: 9?на Вимео?
Меня не волнует, что он в итоге обрезан слева и справа на мобильных устройствах, потому что это просто настроение — но мне важно, чтобы он закрывал весь экран, а не только верхнюю часть (как сейчас) .
Какие-нибудь советы по этому поводу?
Большое спасибо!
Хольгер
Ааронокампо (Аарон Окампо)
2
Да, вы можете сделать это, вы хотите, чтобы это было как фоновое видео или как независимое видео?
Хольгер_Х (Хольгер Херрманн)
3
Здравствуйте! Спасибо за ответ!
Я думаю, что хочу использовать фоновое видео, которое должно воспроизводиться автоматически (как в моем примере на рабочем столе), но я не уверен, что вы имеете в виду под «независимым видео».
У вас есть обходной путь для этого?
Хольгер_Х (Хольгер Херрманн)
4
@aaronocampo Я нашел пример того, чего хочу добиться:
https://fvsch.com/video-background/test.html
(изменить размер окна браузера, чтобы увидеть, как видео ведет себя на разных окнах просмотра)
Разница is: В моем случае я должен использовать вставку vimeo + я хочу видео в качестве настроения на заднем плане — это означает, что никакие элементы управления видео не нужны.
Надеюсь, это понятно. Заранее спасибо!
ааронокампо (Аарон Окампо)
5
Что-то вроде этого?
http://video-bg-loop.webflow.io/
Holger_H (Хольгер Херрманн)
6
Да… примерно так
Это также работает с встраиванием vimeo?
Спасибо, я очень ценю вашу помощь!
ааронокампо (Аарон Окампо)
7
Знаете ли вы, что для использования видео vimeo в качестве фона без каких-либо элементов управления вам нужна платная учетная запись vimeo?
Для этого я бы порекомендовал скачать видео и загрузить его в Webflow.
Хольгер_Х (Хольгер Херрманн)
8
Да. Я знаю об этом. У моего друга плюс аккаунт. А с кодом для встраивания, который я получил от vimeo, можно было добиться полноэкранного режима на рабочем столе, но не на мобильном устройстве.
Я боюсь, что если я загружу видео, размер файла будет слишком большим для отображения в качестве фонового видео, поэтому я хочу использовать опцию встраивания.
