ビデオタグの高さ（画面の幅にもよる）

Question

この可能性をどのように実装できるか教えてください。ブラウザ画面の幅に応じて、ビデオタグの高さは常に70％に保たれます。 cssを通して、私はそれをすることができませんでした。 ビデオ自体は画面の全幅にあります。私は

<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にjsの上

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

Answer 1

あなたは vwのようにサイズを設定することができます

またはviewportWidthあるvhまたは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>

Answer 2

これをやりたいです使用してみてくださいこのCSSコード：

video {height: 70vw;} 

Answer 3

あなたはwindow.screen.widthまたはscreen.widthを使ってJavaScriptでブラウザ画面の幅を取得し、必要な計算を行うことができます。