Question

我有以下代码，但在正文中，＃container和#localVideo没有显示100％的宽度和高度。此外，当浏览器调整大小时，它不会自动调整。

任何想法？

<body style="padding:0px;margin:0px;">

  <div id="container" style="width:1024px; height: 768px;
       position: absolute;margin: 0px auto;">

    <video id="localVideo" oncontextmenu="return false;"  style="width:100%; height:100%;"></video>
  </div>


</body>

Answer 1

为youtube嵌入视频试用以下响应代码：

HTML

<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

CSS

.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Answer 2

使用新的CSS viewport units vw和vh（视口宽度/视口高度）

您甚至不需要将其包装在容器中。

<强> FIDDLE

video {
    width: 100vw; 
    height: 75vw; /* 768/1024 = .75 */
    background:pink;  /* not needed after you add the src attribute in the video element */
}

浏览器支持也很好：IE9 +（[caniuse] [3]）

Answer 3

您明确将高度和宽度设置为像素值，为什么会调整大小？

<body>
    <div id="container">
        <video id="localVideo" ...>No Video Support!</video>
    </div>
</body>

和CSS：

html, body, #container, #localVideo {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

此外：

不要使用内联样式 - 请不要。
height: 100%仅在父元素具有已知高度（即不是自动）时才有效。这就是为什么html和body都必须拥有它的原因。

Answer 4

如果我有这个问题，高度或宽度不起作用我用Jquery设置高度和宽度，而不是它的工作原理。

如果你使用javascript进行操作，你也可以查找调整大小而不是运行大小函数。比你得到这样的东西：（这是Jquery代码）

$(document).resize(function(){
   size();
});

function size(){
  //inhere the code to set the height and width
}

CSS - 如何使视频元素完全100％的宽度和高度，以便在浏览器调整大小时自动缩放？

4 个答案: