gpt4 book ai didi

html - 视频标签填充 100% div,无论比例如何

转载 作者:技术小花猫 更新时间:2023-10-29 12:50:14 25 4
gpt4 key购买 nike

我想要一个视频标签来填充 100% 的 div:

a) 它不需要保持比率(否则我们需要使用 overflow:none);

b) 填充一个div,而不是整个背景;

c) 有责任心会加分。现在只要您对 Angular 线调整窗口大小即可。保持高度并水平调整大小会剪切视频。

我已经尝试了数十种甚至数百种替代方案,并且它们都保持了初始视频比例。

它适用于 fidlle ....可能是因为屏幕小,可能是因为fiddle是更好的浏览器...

<body>
<div class="wrapper">
<div class="header">
.....
</div>
<div class="out-video">
<video autoplay loop poster="mel.jpg" id="bgvid" width="100%" height="100%">
<source src="http://www.mysite.braaasil.com/video/mel.webm" type="video/webm">
<source src="http://www.mysite.braaasil.com/video/mel.mp4" type="video/mp4">
</video>
</div>
</div>

该站点在这里,但当我尝试解决方案时,它会发生变化...右侧和左侧边栏是空的。我希望视频能填满整个宽度。当它覆盖 div 时,高度会发生变化并且视频不会完整显示。我想要像 background-size 100% 100% 这样的东西将图像拉伸(stretch)到 div 的末尾,但它不适用于视频。

感谢您提前提出任何建议。

附言。 android 系列好像没有播放视频!

最佳答案

使用 object-fit css属性,虽然不支持IE,但是用在<video>上还是挺合理的, <img>标签。

检查 CanIUse用于浏览器支持,以及 CSS-Tricks供使用。

例子:

/** If parent has some defined width/height */
.video-element {
width: 100%;
height: 100%;
object-fit: cover;
}

关于html - 视频标签填充 100% div,无论比例如何,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22874155/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com