Держите HTML5 Background-Video на весь экран

Question

Проблема: Когда я изменяю размер окна моего браузера, мое уже выровненное видео будет продолжать заполнять экран, сохраняя соотношение сторон, пока ширина окна больше высоты.Когда высота окна начинает становиться больше ширины, в верхней и нижней части видео появляются пробелы.
Мой код: В настоящее время я использую следующий код CSS для приведенного нижеHTML-код:

.bgvideodiv {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    text-align: center;
    -webkit-filter: blur(5px) brightness(50%);
    -moz-filter: blur(5px) brightness(50%);
    -o-filter: blur(5px) brightness(50%);
    -ms-filter: blur(5px) brightness(50%);
    filter: blur(5px) brightness(50%);
    overflow: hidden !important;
  }
  .bgvideo {
    height: 100%;
    min-width: 100%;
    width: auto;
    /* Same: object-fit: fill; */
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
  }
  .scaler {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    text-align: center;
    overflow: hidden;
    transform: scale(1.2);
  }

<div class="scaler">
    <div class="bgvideodiv">
      <video playsinline="" autoplay="" muted="" preload="auto" poster="" loop="" class="bgvideo">
        <source src="hero.mp4" type="video/mp4"></source>
        <source src="hero.webm" type="video/webm"></source>
      </video>
    </div>
  </div>

(чтобы этот фрагмент работал, вам нужно добавить собственное видео mp4 и webm)
Я бы предпочел чисто CSS-решение, но JS/ jQuery тоже хорошо.

Я НАШЕЛ РЕШЕНИЕ ДЛЯ ЭТОГО;СМОТРЕТЬ НИЖЕ.

Answer 1

Надеюсь, это поможет:)

.bgvideodiv {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden;
}

.bgvideodiv video {
  min-width: 100%; 
  min-height: 100%; 
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}


<div class="bgvideodiv">
  <video playsinline="" autoplay="" muted="" preload="auto" poster="" loop="" class="bgvideo">
    <source src="hero.mp4" type="video/mp4">
    <source src="hero.webm" type="video/webm">
  </video>
</div>

Answer 2

Оказывается, Bulma, CSS Framework, который я использую, автоматически применяет правило max-width: 100%; ко всем объектам video, img, object, embed и iframe (без причины, как кажется). Я отключил правило с помощью следующего фрагмента, вставьте его где-нибудь под врезкой bulma:

embed, iframe, img, object, video {
   max-width: none;
}

Любые правила максимальной ширины, которые должны переопределять это значение, должны быть помещены ниже этого.
Теперь все работает нормально, спасибо за любые предложения.

Answer 3

попробуйте

.bgvideo {
   width: 100%;
   height: auto;
   /* Same: object-fit: fill; */
   position: absolute;
   left: 50%;
   top: 50%;
   -webkit-transform: translate(-50%,-50%);
   -ms-transform: translate(-50%,-50%);
   transform: translate(-50%,-50%)
 }