Html 视频标签填充100%div，不考虑比率_Html_Css_Responsive Design

Html 视频标签填充100%div，不考虑比率

html css responsive-design

Html 视频标签填充100%div，不考虑比率,html,css,responsive-design,Html,Css,Responsive Design,我想用一个视频标签来填满一个div的100%： a）它不需要保持比率（否则我们需要使用溢出：none） b）填充一个div，而不是整个背景 c）负责任是一件好事。现在只要你调整窗口的对角线大小就可以了。保持高度并水平调整大小将剪切视频我已经尝试了几十种，如果不是几百种的话，它们都保持了最初的视频比例它在……中起作用。。。。也许是因为屏幕小，也许是因为fiddle是一个更好的浏览器 <body> <div class="wrapper"> <div

我想用一个视频标签来填满一个div的100%：

a）它不需要保持比率（否则我们需要使用溢出：none）

b）填充一个div，而不是整个背景

c）负责任是一件好事。现在只要你调整窗口的对角线大小就可以了。保持高度并水平调整大小将剪切视频

我已经尝试了几十种，如果不是几百种的话，它们都保持了最初的视频比例

它在……中起作用。。。。也许是因为屏幕小，也许是因为fiddle是一个更好的浏览器

<body>
<div class="wrapper">
    <div class="header">
     .....
    </div>
    <div class="out-video">
        <video autoplay loop poster="mel.jpg" id="bgvid" width="100%" height="100%">
            <source src="http://www.mysite.braaasil.com/video/mel.webm" type="video/webm">
            <source src="http://www.mysite.braaasil.com/video/mel.mp4" type="video/mp4">
        </video>
     </div>
</div>


.....

该网站在这里，但当我尝试解决方案，它会改变。。。有一个左右侧边栏是空的。我想视频填补整个宽度。当它覆盖div时，高度会发生变化，视频不会完整显示。我想像背景大小100%100%的东西，拉伸图像的div结束，但它不适用于视频

谢谢你事先提出的任何建议

另外，安卓家族似乎没有播放视频

您可以使用类似的解决方案。比率不会改变，但您可能会丢失视频的正确部分

video#bgvid {
    position: absolute;
    z-index: 0;
    background: url(mel.jpg) no-repeat;
    background-size: 100% 100%;
    top: 0px;
    left: 0px; /* fixed to left. Replace it by right if you want.*/
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

视频将固定在左上角。如果你想改进它，我想你需要一些JavaScript

编辑：

只需使用JQuery找到一个能够满足您需要的解决方案：

使用

对象匹配

css属性，虽然不支持IE，但用于

，

标记还是很合理的

检查浏览器支持和使用情况。

试试这个

HTML:


标题
一些内容

减：

简单CSS-inheit

video {
  width: inherit;
  height: inherit;
}

div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
}

webm版本似乎丢失了。也许您需要在服务器上设置该格式的权限。不过，你的需求并不明确，链接到它的链接给出了404。这可能是因为服务器未设置为允许该文件类型，您可以在.htaccess文件中用一行轻松修复该文件类型。谢谢。Jquery解决方案似乎将标题添加到视口中，因此将出现一个滚动条，这是可以接受的。我试着没有滚动条，全底div（宽度：100%，高度：视口的85%）。问题是视频不像图像那样有弹性。。。它覆盖了！重要的。。。。还有其他一切。它很容易有空侧面板的完整视频，滚动条或隐藏溢出的完整div。更改视频的比例以填充div，并拥有完整的视频是很重要的。Ohhh..我喜欢这一个你可能想使用一个类名而不是divOk谢谢我只是为我的个人项目写了这篇文章，遇到了一个和我有同样问题的人，不希望其他人浪费时间在所有其他不可行的答案上

video {
  width: inherit;
  height: inherit;
}

div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
}