Question

（我只是在学习CSS，所以请不要对我大喊大叫＆gt;。＆gt; ...）我有一个相当大的高清视频，我想放在后台。我最初建立它的方式是

#video-background {      
      position: fixed;
      right: 0;
      bottom: 0;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      z-index: -1000;
      background-size: cover;}

HTML：

<video preload="auto" autoplay loop="loop" id="video-background" muted="muted">
  <source src="bg3.mp4" type="video/mp4">
  <script>
  document.getElementById('video-background').playbackRate=0.4;
  </script>
</video>

我尝试了各种方法来降低它，例如将background-size更改为contain，添加object-fit: cover，我在SO上找到的其他一些解决方案...... 然后我将min更改为max的宽度和高度（我不知道为什么我一开始没有做到这一点，这完全有道理......）

所以现在视频确实适合屏幕，但由于宽高比，我的侧面空白。

是否有任何方法可以适应视频以使其与屏幕的高度或宽度相匹配，然后离开屏幕然后需要保持其宽高比？换句话说，如何在覆盖整个屏幕的同时最小化视频的大小（即使某些部分被切断）？

我已经决定，目前最简单的方法是将max-width设置为100％：并删除对高度的任何引用......但我不确定任何标准分辨率的宽高比是否大于视频的宽高比。但这应该有效，只要这是真的。

编辑：我可以看到我的临时解决方案对于缩放页面本身而言非常有用％\ ......就像你正在进行分屏一样。然后视频保持全宽，但现在顶部和底部都有间隙＆gt;。 ..... gruuuuunt

有没有办法在CSS中用背景视频覆盖页面？

0 个答案: