Видеофон для сайта uCoz

01.09.2016 596 0 Turbo Все для uCoz Скрипты для uCoz

Видеофон для сайта uCoz-некоторые из вас видели на некоторых сайтах такое чудо как видеофон и хотели перетянуть данное улучшение к себе,хотелось бы сказать,что после установки такое фона прогрузка страницы сайта увеличится.Видеофон можно взять любой,главное чтобы он совпадал с тематикой сайта.Пример такого скрипта это сайт игры WarThunder,их фон это клип на эту игру выглядит очень эффектно

Установка:расположим код перед закрывающим тегом body.

Код

CSS

body {
/* Задаем фон для нашей страницы в виде обычного изображения.
Это нужно на случай, есть браузер не смог воспроизвести видео из-за того,
что он не поддерживает тег video. */
background: fixed url(images/video_bg.jpg) no-repeat;
background-size: cover;
}

Код

#video_bg {
  /* Делаем так, чтобы видеофон занимал фиксированное положение. */
  position: fixed;
  top: 0;
  left: 0;
  /* Располагаем наш фон под всем содержимым на странице.
  Для этого используем отрицательный z-index. */
  z-index: -1000;
  /* Растягиваем видео так, чтобы не было видно черных полос и
  чтобы независимо от разрешения экрана видеофон занимал все рабочее пространство. */
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
}

В коде CSS

Код

@media (min-aspect-ratio: 16/9) {
  #video_bg {
  height: 300%;
  top: -100%;
  }
}

@media (max-aspect-ratio: 16/9) {
  #video_bg {
  width: 300%;
  left: -100%;
  }
}

@supports (object-fit: cover) {
  #video_bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  }
}

Файлы для скачивания отсутствуют.

Поблагодарить автора Автор: Turbo

ДемонстрацияВизуальное демонстрирование