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