Видеофон для сайта uCoz
01.09.2016 102 0 Milan_Shubin_

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

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

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

Код
<video id="video_bg" autoplay="autoplay" loop="loop">  
  <source src="video/background.mp4" type="video/mp4"></source>  
  <source src="video/background.webm" type="video/webm"></source>  
</video>


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;  
  }  
}
Файлы для скачивания отсутствуют.
Поблагодарить автора Автор: Milan_Shubin_
ДемонстрацияВизуальное демонстрирование
Комментарии (0)
Добавить комментарий
Прокомментировать