绝对元素不会根据屏幕调整宽度

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;