視頻標籤的高度取決於屏幕的寬度

-1

請告訴我如何實現這種可能性，取決於瀏覽器屏幕的寬度，視頻標籤的高度始終保持70％。通過CSS，我無法做到這一點。視頻本身位於屏幕的整個寬度上。我想做到這一點的JS視頻標籤的高度取決於屏幕的寬度

<div class="video-cont"> 
     <div class="overlay-video"></div> 
    <video src="https://globecore.com/wp-content/themes/globecore2016/video/usa-lp-video.mp4" type="mp4" autoplay="true" loop="loop"></video> 
    </div>

CSS

.video-cont { 
    overflow: hidden; 
    margin: -32px; 
    position: relative; 
} 
.overlay-video { 
    position: absolute; 
    top: 0px; 
    background: rgba(0, 0, 0, 0.6); 
    right: 0px; 
    height: 670px; 
    width: 100%; 
    z-index: 8; 
}

來源

2017-10-13 Александр Пивень

您希望視頻高度爲視口寬度的70％？ –

您可以設置大小不一樣vw或vh這是viewportWidth或viewportHeight

.video-cont { 
 
    overflow: hidden; 
 
    margin: -32px; 
 
    position: relative; 
 
} 
 
.overlay-video { 
 
    position: absolute; 
 
    top: 0px; 
 
    background: rgba(0, 0, 0, 0.6); 
 
    right: 0px; 
 
    height: 670px; 
 
    width: 100%; 
 
    z-index: 8; 
 
} 
 

 
.video-cont video { 
 
    height: 70vw; 
 
}

<div class="video-cont"> 
 
     <div class="overlay-video"></div> 
 
    <video src="https://globecore.com/wp-content/themes/globecore2016/video/usa-lp-video.mp4" type="mp4" autoplay="true" loop="loop"></video> 
 
    </div>

來源

2017-10-13 05:11:00 caramba

謝謝。它的工作 –

@АлександрПивень很高興它幫助，愉快的編碼 – caramba

嘗試使用這個CSS代碼：

video {height: 70vw;}

來源

2017-10-13 05:11:42 Owl

您可以通過使用window.screen.width或screen.width可以在javascript瀏覽器屏幕的寬度，然後做必要的計算。

來源

2017-10-13 05:14:48 hirakJS

視頻標籤的高度取決於屏幕的寬度

回答

相關問題