如何调整自适应背景视频的高度和宽度?

时间:2018-09-05 15:21:38

标签: html css css3

我试图将视频背景添加到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;
}

我的问题的密码笔是https://codepen.io/mrsalami/pen/XPaMvW/

0 个答案:

没有答案