html - 当我放大和缩小时，如何防止我的视频 div/container/wrapper 移动？

Question

这是正在发生的事情。我不希望我的视频是全宽的。我想要一个特定的宽度。当我更改宽度时，容器将视频发送到左侧。然后，当我放在中间时，它看起来很好......直到你放大和缩小并且 div/container/wrapper 移动视频。

我该如何解决这个问题？

当我放大和缩小时，如何防止我的视频 div/container/wrapper 移动？

视频直接位于导航栏下方，因此我确定它与页眉的 div/wrapper 宽度有关。请帮忙。

HTML

-->

  <div  class="video-background" id="video-background">
    <video  loop="loop" autoplay poster="{{ 'home-placeholder.jpg' | asset_url }}" width="100%">
        <source src="{{ 'home.mp4' | asset_url }}" type="video/mp4">
        <source src="{{ 'home.webm' | asset_url }}" type="video/webm">
        <source src="{{ 'home.ogg' | asset_url }}" type="video/ogg">
        <img alt="" src="{{ 'home-placeholder.jpg' | asset_url }}" width="640" height="360" title="No video playback capabilities, please download the video below">
    </video>
    <a href="#home-bubbles" class="skip-video" title="Scroll Down">Scroll Down</a>

  </div>

和 CSS

div.video-background {
    height: 100%;
    left: 0;
    overflow: hidden;
    /*position: fixed;
    top: 96px;*/
    vertical-align: top;
    width: 100%;
    /*z-index: -1; */
    margin-top:96px;
      position:relative;
}

div.video-background video {
    min-height: 100%;
    min-width: 100%;
    z-index: -2 !important;
}

div.video-background > div {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
}

div.video-background .circle-overlay {
    left: 50%;
    margin-left: -590px;
    position: absolute;
    top: 120px;
}

div.video-background .ui-video-background {
    display: none !important;
}

.index .sub-footer {
    margin-top:0px; 
}

Answer 1

我终于找到了这个问题的答案或修复。

我尝试了三种不同的方法。

1. 在不同的屏幕间隔设置不同的px值

@media screen and (max-width: 1180px){
    div.video-background video {
      
      width:1000px;
      
   }
}
@media screen and (max-width: 801px){
    div.video-background video {
      
      width:700px;
      
   }
}

也试过

width:auto;

没有成功。

1. 然后我尝试了 em

@media screen and (max-width: 75em){

    div.video-background video {
      
      width:50em;
      
   }
}
@media screen and (max-width: 65em){
    div.video-background video {
      
      width:30em;
      
   }
}

工作得更好但没有解决它。

1. 我终于尝试了 vh 设置宽度和高度为 vh

@media screen and (max-width: 1180px){
    div.video-background video {
      
      width:60vh;
      height:60vh;
      
   }
}
@media screen and (max-width: 801px){
    div.video-background video {
      
      width:40vh;
      height:40vh;
   }
}

这解决了问题。请对这些值持保留态度，因为它们并不真正代表我使用的实际数字。但希望这在将来处理浏览器缩放、重叠元素和移动 div 时对您有所帮助。