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

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

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

Можешь почитать и вот эту статейку "Перенос сайта , с локалки на хостинг, или с хостинга на хостинг"

Опрос

Ваше мнение

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

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

Теги

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

Статистика

  • Caйту: 3324 дня
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 571
  • Онлайн всего: [8]
  • Гости: [8]
  • Были сегодня : [4] Яндекс, Google, selischev, irbees2008
  • SQL запросов: 31
  • Генерация страницы: 0.208сек
  • Потребление памяти: 4.932 Mb 
  •   яндекс.ћетрика