Question

当我的<video>被父容器包裹时，我的页面中的视频无法显示我的视频。我实际上是在尝试显示自适应视频。

这是我制作的codepen的链接： http://codepen.io/ChucKN0risK/pen/YwQLZa

HTML：

<div class="media-wrapper video-wrapper">
  <video class="video-wrapper__video" src="http://www.louischenais.fr/src/video/Mobile_It_Changes_Everything.mp4"></video>
</div>

CSS：

.video-wrapper {
  position: relative;
  padding-top: 56.25%;
  background-color: green;
}

.video-wrapper__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Answer 1

您必须设置视频包装宽度。

formatter

Answer 2

我认为你写错了视频标签。我写了正确的视频标签并为图像和视频写了css。

以下是codepen.io

 <div class="media-wrapper video-wrapper">
       <video class="video" controls>
        <source src="http://www.louischenais.fr/src/video/Mobile_It_Changes_Everything.mp4" type="video/mp4">
      </video> 
  </div>

图像和视频的CSS代码..

img {
  max-width: 100%;
  width:100%;
}
.video {
  width:100%;
  max-width:800px;
  height:auto;
}

HTML5视频无响应

2 个答案: