Иногда на промо-страничках или landing page, применяют такое интересное решение, как видеофон (video background). Главный плюс такого эффекта - это выделиться среди конкурентов. Ведь ваша страничка станет более необычной, чем у всех остальных.
Но естественно, у видеофона есть и ряд недостатков и главный из них, это то, что страница сайта будет дольше грузиться, но если применять данную фишку рационально, то все недостатки можно свести к минимуму.
Главной основой такого фона, является тег video, который появился в HTML5. Его можно расположить перед закрывающим тегом body.
Разметка
<video class="video_bg" src="/background/video/home-video.mp4" poster="/background/video/background.jpg" autoplay loop muted>
<source src="/background/video/home-video.webm" type="video/web">
<source src="/background/video/home-video.mp4" type="video/mp4">
</video>
autoplay - делает так, чтобы видео начало воспроизводиться автоматически, сразу же после загрузки страницы.
loop - начинает повторное воспроизведение видео после его окончания.
CSS
body {
/* Задаем фон для нашей страницы в виде изображения. Если ваш браузер не сможет воспроизвести видео, например, не поддерживает тег video, то у вас всегда будет картинка. */
background: fixed url(images/video_bg.jpg) no-repeat;
background-size: cover;
}
.video_bg {
position: fixed; /* Делаем так, чтобы видеофон занимал фиксированное положение. */
top: 0;
left: 0;
z-index: -1000; /* Располагаем наш фон под всем содержимым на странице. Для этого используем отрицательный z-index. */
min-width: 100%; /* Растягиваем видео так, чтобы не было видно черных полос и чтобы независимо от разрешения экрана видеофон занимал все рабочее пространство. */
min-height: 100%;
width: auto;
height: auto;
}
Обратите внимание на формат видео!
Если вы хотите добиться воспроизведения видеофона в большинстве браузеров, то ваш ролик должен быть как минимум в двух форматах в MP4 и WebM.
| View demo |
|
Понравился материал? Поделитесь с друзьями |
С этим материалом смотрят:
| Feedback: 0 | |