javascript - 绝对元素不根据屏幕调整宽度
问题描述
我有两个视频,我正试图将其用于电影摄影 - 背景中的循环树和一只狗在前面移动一次的视频。我已经剪切了狗的视频并想将其放置在背景上,但是我无法对齐剪切的视频以使其在各种屏幕上正确调整大小。有人对如何解决这个问题有任何建议吗?也许有一种方法可以在 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;
推荐阅读
- java - TableRow style class not sticking to row when ordering TableView
- php - 动态调整宽度和高度 Cloudinary
- php - 截断双精度值(php)
- java - 实现一个接受两个不同类的参数的通用函数?
- wagtail - Wagtail 按用户权限隐藏/显示菜单项
- javascript - 如何使用javascript访问标签内单选按钮的值?
- android - 图库未在 xamarin android 中使用意图显示请求的图像
- c - Coverity 扫描无法构建
定义了 _GNU_SOURCE - mysql - SQL 中 ifnull() 的令人困惑的行为
- wordpress - 致命错误:调用未定义函数 gdlr_print_header_social()