Html 响应性网站的视频高度和宽度

我正在一个响应性网站上使用视频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>

---

有什么想法吗？

在不支持视频标签的设备上，您可以显示图像。这里有一个答案

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

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

使用CSS3

translate（-50%，-50%）

将视频置于页面中央：

Html代码

---

参见.

你可以考虑使用Vimeo视频，它几乎所有的东西都支持！浏览器支持视频标记。视频播放。这不是问题所在。由于某种原因，视频标记正在破坏布局。此浏览器支持视频标记。它播放视频。只是它破坏了我的布局，在视频标签出现之前，我的布局非常好。我所做的只是将它的高度和宽度设置为100%，我本以为在现有布局中会将其设置为100%。它总是保持比例吗？也就是说，如果我设置了100%高度和100%宽度，它将无法填充容器的高度和宽度？据我所知，如果设置了高度，它将拉伸视频，除非顶级元素设置了适当的高度来容纳它，使100%高度不再扩展。只使用“宽度”更容易，其余部分由浏览器完成。最好将“高度”设置为“自动”。高度：自动！重要的我无法让它填满整个高度和宽度。

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

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