html - 如何制作响应式视频容器div？

Question

我正在尝试使视频容器 div 具有响应性，但目前无法管理它。

我当前的视频和容器 CSS:

   .header-container{
    width: 100% !important;
    height: auto !important;
    border-left: none;
    border-right: none;
    position: relative;
    padding: 20px;
} 

    video-container{
    position: absolute;
    top: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    overflow: hidden;
} 

     .video{
     position: absolute;
     z-index: -1;
     opacity: 0.78;
     widows: 100%;
     width: 100% !important;
     height: auto !important;
     margin:0 auto;
 } 

HTML:

      <div class="header-container">
 <div class="video-container">
    <video preload ="true" autoplay loop = "loop" volume = "0" style="width: 100%;
    height: auto;">
         <source src = "webd.mp4" type = "video/mp4" >
         </video>
  </div> 
</div>

目前的样子: Current look

您能告诉我如何解决吗？我在 HTML 和 CSS 方面还是新手，我真的需要你的帮助和建议。

Answer 1

https://jsfiddle.net/mlegg10/fsftz8rt

/* Flexible iFrame */

.flexible-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.flexible-container iframe,
.flexible-container object,
.flexible-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<!-- Responsive iFrame -->
<div class="flexible-container">
<iframe src="<source src = "webd.mp4" type = "video/mp4" >" frameborder="0" style="border:0"></iframe>
</div>