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

Question

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

我怎么解决这个问题？

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

视频直接在导航栏下面，所以我确定它与标题的div /包装宽度有关。 请帮忙。

HTML

- >

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; 
}

和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; 

没有做的伎俩。

2. 然后我试了一下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; } } 

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

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