Хаки и Скрипты Next Generation CMS

Вместо фона на сайте воспроизводится видео.

irbees2008 irbees2008 Опубликовано - 27 - октября Интерфейс
1382 - 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>
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') адрес до картинки , которая будет появляться в мобильных версиях.
Ну все пользуемся.

Можешь почитать и вот эту статейку "Задаем собственные страницы ошибок htaccess"

Опрос

Ваше мнение

Как вам наш дизайн сайта?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 3408 дней
  • Новостей: 549
  • Комменты: 254
  • Зарегистрированно : 578
  • Онлайн всего: [6]
  • Гости: [6]
  • Были сегодня : [5] Google, Яндекс, Яндекс, redflame, Яндекс
  • SQL запросов: 30
  • Генерация страницы: 0.208сек
  • Потребление памяти: 4.950 Mb 
  •   яндекс.ћетрика