如何在放大和縮小時保持視頻div /容器/包裝不移動？

Question

這是發生了什麼事。我不希望我的視頻是全角。我想要一個特定的寬度。當我改變寬度時，容器將視頻發送到左側。然後，當我放在中間時，它似乎很好....直到你放大和縮小div /容器/包裝移動視頻。

我該如何解決這個問題？

當我放大和縮小時，如何保持視頻div /容器/包裝不移動？

視頻直接在導航欄下，所以我確定它與標題的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. 在不同的屏幕間隔

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

沒有辦法。

我然後試圖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; 
 
     
 
    } 
 
}

更好地工作，但沒有解決。

我終於嘗試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。