work@lienusowl.ru

Полное портфолио: zsws.ru

Фоновое видео с помощью js и css

Для начала разберем почему не будет работать - просто использовать html5 с компонентом video, проще всего это посмотреть на примере:

  

И стили для этой структуры

    * {
      margin: 0; padding: 0;
    }
    
    #container {
      overflow: hidden;
      height: 400px;
      background: #edeae8;
    }
    
    video {
      width: 100%;
      height: 100%;
    }

Мы столкнемся с проблемами: при изменении пропорций видео которые не будут совпадать с нашим исходным видео - примет не верные размеры и будет ограничено своими пропроциями, поэтому такой вариант нам не подойдет.


Сделаем фон с помощью скрипта и посмотрим как работает скрипт:

Использовать будем готовую библиотеку - Bideo.js.

За основу возьмем структуру ту же что и выше, но уже с использованием нашей библиотеки

Ниже опишу уже готовый код который можно просто копировать и подставлять себе

    
    	
    

В файле style.css будет следующий код:

    * {
      margin: 0; padding: 0;
    }
    
    #container {
      overflow: hidden;
      height: 400px;
      background: #edeae8;
      position: relative;
    }
    
    video {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 0;
    }