Question

这里发生了什么。我不希望我的视频是全宽的。我希望它具有特定的宽度。当我更改宽度时，容器将视频发送到左侧。然后，当我放在中间时看起来很好....直到你放大和缩小div和容器/包装器移动视频。

我该如何解决这个问题？

当我放大和缩小时，如何防止我的视频div /容器/包装器移动？

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

HTML

- ＆GT;

  <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

我终于找到了答案或修复。

我尝试了三种不同的东西。

以不同的屏幕间隔设置不同的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;

没有做到这一点。

然后我试了一下

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

工作得更好但没解决。

我终于尝试将宽度和高度设置为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时帮助您。

放大和缩小时，如何防止视频div /容器/包装器移动？

1 个答案: