Blazor WASM problems with css

Question

由于某些原因，我的Blazor WASM项目无法正确渲染视频文件。当我运行项目时，视频标记的CSS不适用。

这是我的视频html标签：

<header>
<div class="overlay"></div>
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="/videos/background.mp4" type="video/mp4"/>
</video>
</header>

视频标签的CSS样式：

header {
position: relative;
background-color: black;
height: 75vh;
min-height: 25rem;
width: 100%;
overflow: hidden;

}

header video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);

}

Answer 1

问题已修复。我不知道我是怎么做的，但很可能是因为我把视频CSS代码移到了另一个文件中，并在index.html文件中引用了它。此外，还有一个新的VS 2022更新，可能也解决了这个问题。