[英]Absolute element doesn't adjust width according to screen
我有兩個要用於電影攝影的視頻-背景中的樹在循環中,而狗在前面移動了一次。 我已經剪切了狗視頻並希望將其放置在背景上,但是我無法對齊剪切后的視頻以使其在各種屏幕上正確調整大小。 有人對此有什么建議嗎? 也許有一種方法可以在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>
您需要為視頻分配寬度和高度
video {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
如果您希望視頻覆蓋屏幕,請添加以下行:
object-fit: cover;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.