2552
- 0
- Адаптировал: 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>
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;
}
}Ну все пользуемся.
Можешь почитать и вот эту статейку "Добавление в социальные закладки"
Это тоже интересно
25.03.14 Много-уровневое адаптивное меню
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
