视频标签的高度取决于屏幕的宽度

问题描述：

请告诉我如何实现这种可能性，取决于浏览器屏幕的宽度，视频标签的高度始终保持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; 
}

您希望视频高度为视口宽度的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>

谢谢。它的工作 –

@АлександрПивень很高兴它帮助，愉快的编码 – caramba

答

尝试使用这个CSS代码：

video {height: 70vw;}

答

您可以通过使用window.screen.width或screen.width可以在javascript浏览器屏幕的宽度，然后做必要的计算。

视频标签的高度取决于屏幕的宽度

相关推荐