Абсолютный элемент не регулирует ширину в соответствии с экраном

Question

У меня есть два видео, которые я пытаюсь использовать для кинематографа: деревья на петле на заднем плане и видео с собакой, движущейся только один раз впереди. Я вырезал видео с собакой и хотел поместить его поверх фона, но у меня проблемы с выравниванием видео для того, чтобы оно правильно меняло размеры на разных экранах. У кого-нибудь есть какие-либо предложения по поводу этого? Может быть, есть способ сделать это в JS?

// fallback: show controls if autoplay fails
// (needed for Samsung Internet for Android, as of v6.4)
window.addEventListener('load', async() => {
  let video = document.querySelector('video[muted][autoplay]');
  try {
    await video.play();
  } catch (err) {
    video.controls = true;
  }
});

var video = document.getElementById("videob");
video.addEventListener("canplay", function() {
  setTimeout(function() {
    video.play();
  }, 5000);
});

video {
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#video {
  position: absolute;
  top: 0;
  left: 0;
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.4;
}

<link 
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
  rel="stylesheet" 
  integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
  crossorigin="anonymous">

<div class="container">
  <video 
    poster="https://aiimblabs.com/j/still.jpg" 
    id="videob" 
    preload="true" 
    src="https://aiimblabs.com/j/dog.mp4" 
    muted 
    autoplay>
  </video>
  <video 
    poster="https://aiimblabs.com/j/still.jpg" 
    id="overlay" 
    src="https://aiimblabs.com/j/tree.mp4" 
    muted 
    autoplay 
    loop>
  </video>
</div>

Answer 1

Вам необходимо назначить ширину и высоту для видео

video {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
}

Если вы хотите, чтобы видео покрывали экран, добавьте следующую строку:

object-fit: cover;