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

【问题标题】：Video height and width for responsive website响应式网站的视频高度和宽度
【发布时间】：2015-01-29 00:18:25
【问题描述】：

我在响应式网站上使用视频 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>

有什么想法吗？

【问题讨论】：

你可以考虑使用 Vimeo 视频，几乎所有东西都支持它！
浏览器支持video标签。视频播放。那不是问题。出于某种原因，视频标签正在破坏布局。

标签： html video mobile responsive-design

【解决方案1】：

您可以同时使用 max-width 属性或 object-fit 属性来实现此目的。请参阅参考资料：Using the object-fit property 和 Using the max-width property with fill-available

/* 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;
}

【讨论】：

【解决方案2】：

在不支持 video 标签的设备上，您将改为显示图像。这里有一个答案How can I display an image if browser does not support HTML5's <video> tag

编辑：在 css 样式而不是视频标签中设置宽度和高度。只设置宽度，保持尺寸比例，像这样。

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

【讨论】：

此浏览器支持 video 标签。它播放视频。只是它打破了我的布局，这在视频标签之前非常好。我所做的只是将其高度和宽度设置为 100%，我原以为在现有布局中会将其设置为 100%。
总是保持比例吗？意思是，如果我设置 100% 高度和 100% 宽度，它不会填满容器的高度和宽度？
据我所知，如果您设置了高度，它将拉伸视频，除非顶级元素设置了适当的高度来包含它，从而使 100% 的高度不会进一步扩展。只使用宽度并让浏览器完成剩下的工作会更容易。
最好将高度设置为自动。高度：自动！重要；
我无法让它填满整个高度和宽度。

【解决方案3】：

使用 CSS3 transform translate(-50%, -50%) 使视频位于页面中心：

HTML代码

      <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;
    }

请看这里demo。

【讨论】：