使用视频标签嵌入 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 轴，它应该完全像您拥有的视频一样嵌入，

使用视频标签嵌入 Html5 时视频放大

Video zooms in when embedding in Html5 using video tag

html

css

html5-video

blazor