Background Image

Видеофон для сайта CSS

Script

by — Category Script on

Иногда на промо-страничках или 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
Понравился материал?
Поделитесь с друзьями

С этим материалом смотрят:
    Фиксированная навигация на CSS3 и jQuery

    Фиксированная навигация на CSS...

    Фиксированная навигация, которой пользователь сможет...

    View More
    0 729 12:35
    Эффект пульсации или мерцания на CSS3

    Эффект пульсации или мерцания ...

    Данный скрипт очень подойдёт для реалистичности эффе...

    View More
    0 1126 13:49
    Замена слов предложения при помощи CSS3 анимации

    Замена слов предложения при по...

     Идея заключается в том, чтобы имея какое-то пр...

    View More
    0 381 17:15
    Стильная кнопка скачать на CSS3

    Стильная кнопка скачать на CSS...

    Сейчас создается много сайтов, которые занимаются ра...

    View More
    0 331 22:34
Feedback: 0

Leave a Comment

Имя *:
Email *:
Код *:
Menu