gpt4 book ai didi

html - 如何使视频宽度100%或高度100%

转载 作者:行者123 更新时间:2023-12-04 15:35:39 29 4
gpt4 key购买 nike

我遇到了与 this, 相同的问题但我正在尝试在 <video/> 上进行元素。我有时想制作视频元素width: 100% , 有时 height: 100%按它的纵横比。

这是我的CSS

.remoteVideo-container {
position: fixed;
left: 0;
top: 0;
z-index: 0;
width: 100vw;
height: 100vh;
text-align: center;
background-color: rgb(45, 48, 53);
}

.remoteVideo {
object-fit: contain;
transform: scale(-1, 1);
}

这是我的jsx

      <div className="remoteVideo-container">
<video
className="remoteVideo"
autoPlay
ref={this.remoteVideo}
muted
></video>
</div>

结果:

enter image description here

最佳答案

你几乎明白了,你错过了视频标签的大小。对象位置也很方便:

.remoteVideo {
height:100%; /* or is max-height:100%; */
width:100%; /* or is max-width:100%; */
object-fit: contain;
object-position:center;
transform: scale(-1, 1);
}

在整页中运行以测试调整大小行为的可能示例,或基于 max-height/max-width 100% 的版本https://codepen.io/gc-nomade/pen/bGNzzNj如果视频变得比屏幕大,则缩小视频。由您选择高度和宽度的值。

body {
margin: 0;
}

.remoteVideo-container {
position: fixed;
left: 0;
top: 0;
z-index: 0;
width: 100vw;
height: 100vh;
text-align: center;
background-color: rgb(45, 48, 53);
}

.remoteVideo {
height: 100%;
width: 100%;
object-fit: contain;
object-position: center;
transform: scale(-1, 1);
}
<div class="remoteVideo-container">
<video class="remoteVideo" autoplay muted poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg">
<source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm" />
<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4" />
</video>
</div>

关于html - 如何使视频宽度100%或高度100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59882244/

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