响应式网站的视频高度和宽度

Question

我在响应式网站上使用视频HTML5标签。我将高度和宽度设置为 100%，它工作正常，除了在移动版本中它会破坏布局。

网址： omob-2.myshopify.com

<div style="height: 100%; width: 100%;"> 
<video width="100%" height="100%" autoplay>
<source src="intro_12_07_14.mp4" type="video/mp4">
</video> 
</div>

有什么想法吗？

Answer 1

可以使用最大宽度属性或对象拟合属性来实现此目的。请参阅参考资料：使用对象适合属性和使用最大宽度属性并提供填充

/* Using fill-available on the max-width property */
/* A box you would like to place the video in*/
.wrapper {
   width: 600px
   height: 300px;
}
/* The video */
.wrapper_video > video {
   width: 100%;
   max-width: -webkit-fill-available;
   max-width: fill-available;
}

/* The object-fit property defines how an element responds to the height 
and width of its content box.*/
/* A box you would like to place the video in*/
.wrapper {
   width: 600px
   height: 300px;
}
/* The video */
.wrapper_video > video {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

Answer 2

在不支持视频标签的设备上，您可以改为显示图像。这里有一个答案 如果浏览器不支持HTML5的<视频>标签，如何显示图像

编辑：在css样式中设置宽度和高度，而不是视频标签。仅设置宽度，以保持尺寸比例，如下所示。

video {
    width: 100%;
    height: auto   !important;
}

Answer 3

使用 CSS3 变换translate(-50%, -50%)将视频放在页面中心：

网页代码

      <div class="video-container">
        <video autoplay loop="true" width="1280" height="720">
         <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
       </video>
     </div>

CSS代码

.video-container {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .video-container video {
      /* Make video to at least 100% wide and tall */
      min-width: 100%;
      min-height: 100%;
      /* Setting width & height to auto prevents the browser from stretching or squishing the video */
      width: auto;
      height: auto;
      /* Center the video */
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
    }
    body {
      background: #000;
      color: #fff;
      font-family: 'Oxygen', sans-serif;
    }

请参阅此处的演示。