全宽（固定高度）响应youtube嵌入横幅
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了全宽（固定高度）响应youtube嵌入横幅相关的知识，希望对你有一定的参考价值。
我发现以下codepen根据宽高比调整/缩放嵌入式YouTube视频作为背景图层。
https://codepen.io/dudleystorey/pen/PZyMrd
下面的行似乎根据宽高比处理视频的变化
@media (min-aspect-ratio: 16/9) {
.video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
.video-foreground { width: 300%; left: -100%; }
}
如果我想将视频设置为背景，则调整大小/缩放效果非常有效，但是，我希望视频在div内响应缩放（而不是作为背景）
请看下面的小提琴，以了解我的意思。
https://jsfiddle.net/mhgsre0z/2/
我的问题是我不能像在codepen中那样根据宽高比来缩放视频（缩放？）。因此，在视频的两侧产生黑条垂直条，宽度更宽
欢迎任何帮助，
谢谢！
编辑：
这是我提出的一个解决方案，在断点处略有跳跃我测试了不同的高度/宽度值，以尝试减少跳跃的剧烈程度。
答案
你是这个意思吗。视频不在SO片段上播放，所以这里也是JSFiddle链接。
.content {
max-width: 100% height: auto;
text-align: center;
}
.header-unit {
height: auto;
position: relative;
padding: 0;
}
#video-container {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
border-bottom: solid 2px blue;
border-top: solid 2px blue;
}
#video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}<div class="content">
<h1>
Content above the video banner
</h1>
<p>
I would like to have content above and below an embedded youtube video that rescales/resizes responsively eliminating the black bars at certain aspect ratios by scaling
</p>
</div>
<div class="header-unit">
<div id="video-container">
<iframe class="fillWidth" src="https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="content">
<h1>
Content below the video banner
</h1>
<p>
I would like to have content above and below an embedded youtube video that rescales/resizes responsively eliminating the black bars at certain aspect ratios by scaling
</p>
</div>以上是关于全宽（固定高度）响应youtube嵌入横幅的主要内容，如果未能解决你的问题，请参考以下文章