使用视频标记嵌入Html5时，视频会放大

Question

我正在使用html5视频标签嵌入一个视频。视频在视频播放器上看起来很棒，但每当我嵌入它时，它都会放大。我如何确保它不会放大并适合网络的屏幕

这是我的Html

<div class="video-wrapper">
<div class="full-screen-video-component">        
<video style="height:100%;" loop="" muted="" autoplay="">
<source src="videos/Test.mp4" type="video/mp4">
</video>           
</div>
</div>

CSS

.full-screen-video-component {
position: relative;
height: 100%;
overflow: hidden
}
video {
z-index: -1000;
width: 100%;
object-fit: cover;
}
video {
overflow: hidden;
top: 50%;
left: 50%;
-webkit-transform: translateX(-30%) translateY(-30%) translateZ(0);
-ms-transform: translateX(-30%) translateY(-30%) translateZ(0);
transform: translateX(-30%) translateY(-30%) translateZ(0);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto !important
}

不确定我做错了什么，但我希望视频不要放大，嵌入网络时保持原样。我在Blazor 中使用简单的Html5

Answer 1

如果你有一个大尺寸的视频，有时会发生这种情况。尝试嵌入视频的压缩版本。之后，你可以删除css来转换x和y轴，它应该像你的视频一样嵌入，