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的新手，我真的需要你的帮助＆amp;建议。

Answer 1

您的大量代码不会在html和css之间关联，因此了解它的工作原理对您有所帮助。首先，视频没有样式，因为它在您的CSS中被引用为.video，而您的视频容器与引用相反，视频容器没有点，因此您的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;
}

要制作视图回复，您需要使用其父级进行缩放，并使用％来执行此操作，您需要添加

position: relative;

所有父母

在此之后你需要删除绝对位置，因为它会使它成为一个无法正确缩放的对象，从而弄乱你的样式

以下是我认为你的意思的一个例子：

https://jsfiddle.net/afut7y99/

更改两侧的滑块以查看其大小调整。

Answer 2

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>

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

2 个答案: