Хаки и Скрипты Next Generation CMS : Интерфейс, HTML5, CSS : Вместо фона на сайте воспроизводится видео.

irbees2008 Опубликовано - 27 - октября Интерфейс

Адаптировал: irbees2008
Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Есть сайты на которых за место фона воспроизводится видео, и это как сделать мы сейчас рассмотрим. Будем использовать HTML5 и CSS.

Итак приступим:
1.Загружаем видеоролик с форматом «.avi» или «mp4» ,название видеоролика должно быть на латинице, в папку нашего шаблона.

2. В файл main.tpl добавляем

Код:

<div class="fullscreen-bg">
<video loop muted autoplay class="fullscreen-bg_video">
<source src="{{ tpl_url }}/ваше_название_видео.avi" type=" video/mp4 ">
</video>
</div>

src="{{ tpl_url }}/ваше_название_видео.avi" - указывается адрес видео

3.Ну и куда мы без стилей, в файл стилей вашего шаблона добавляем

Код:

.fullscreen-bg {
overflow: hidden;
z-index: -100;
position: relative;
height: 100%;
width: 100%;
padding-top:45%;
}

.fullscreen-bg_video {
position: absolute;
top: 0;
left: 0;
width: 100%;
}

.overlay {
background: rgba(0,0,0,0.6);
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
z-index: 4;
}

.overlay h1 {
text-align:center;
color:#fff;
font-size: 70px;
margin-top:17%;
}

5.Но для смартфонов это будет тяжеловато, и чтобы менялось наше видео на изображение добавляем в стили :

Код:

@media (max-width: 768px) {
.fullscreen-bg {
background: url('../images/kаrtinka.jpg') center / cover no-repeat;
}

.fullscreen-bg_video {
display: none;
}
.overlay h1 {
text-align:center;
color:#fff;
font-size: 24px;
}
}

url('../images/kаrtinka.jpg') адрес до картинки , которая будет появляться в мобильных версиях.
Ну все пользуемся.

Можешь почитать и вот эту статейку "Делаем стильные radio кнопки"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.