Question

我正在使用此方法制作视频流

https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

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

当我尝试添加最大宽度时 maxwidth：400px; 我在视频的顶部和按钮上有一个黑色填充，怎么能避免这个？

我的问题是如何在不获取黑色填充的情况下设置最大宽度？

Answer 1

如文章中所述，将宽度设置为100％，并根据您嵌入的视频与窗口宽度的比例更改高度。这也在文章（第三部分）中...... （或者你的问题是关于别的东西，在这种情况下抱歉误解）

Answer 2

使用auto表示身高，然后：

（在下面运行代码段时，选择整页，然后调整浏览器窗口大小以查看效果）

＆＃13;

video {
  width    : 100%;
  height   : auto;   /* will retain aspect ratio of initial size */
  max-width: 400px;
  }

＆＃13;

<video muted autoplay="true">
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
</video>

＆＃13;

在流体视频上放置最大宽度

2 个答案: