我试图将视频背景添加到div中。但是,视频最终占据了整个屏幕。我正在努力使div的宽度和高度为50%:calc(100vh-94px)。像这样https://mckinney.com/
我的HTML:
<div id="video-container">
<video autoplay muted loop id="myVideo">
<source src="https://test.ox-seven.com/wp-content/themes/ox-seven/assets/video/Timelapse_Video.mp4" type="video/mp4">
<source src="https://test.ox-seven.com/wp-content/themes/ox-seven/assets/video/Timelapse_Video.webm" type="video/webm">
<source src="https://test.ox-seven.com/wp-content/themes/ox-seven/assets/video/Timelapse_Video.ogv" type="video/ogv">
Your browser does not support HTML5 video.
</video>
<div class="content">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi
pro.</p>
</div>
</div>
我的CSS:
#video-container{
width:50%;
height: calc(100vh - 94px);
position: fixed;
}
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
.content {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}