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

【问题标题】：Video zooms in when embedding in Html5 using video tag使用视频标签嵌入 Html5 时视频放大
【发布时间】：2020-11-26 21:37:56
【问题描述】：

我正在使用 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

【问题讨论】：

标签： html css html5-video blazor

【解决方案1】：

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

【讨论】：