当导航栏向左浮动并且导航栏向右浮动时，如何使嵌入的 youtube 视频随页面缩小答案

【问题标题】：How do i make an embedded youtube video shrink with the page when I have a nav bar being floated left, and a nav bar being floated right当导航栏向左浮动并且导航栏向右浮动时，如何使嵌入的 youtube 视频随页面缩小
【发布时间】：2013-08-20 04:10:52
【问题描述】：

我目前正在我的网站上创建一个页面，其中放置了一个导航栏（浮动：右）和一个导航栏（浮动：左），但是每当我尝试嵌入 youtube 视频时，右导航栏就会结束在页面底部。有谁知道我可以使用什么 css 代码来解决这个问题？这是我目前拥有的： html:

<div class="video-wrapper"> 
<iframe width="700" height="525" src="http://www.youtube.com/embed/MYN5aBPmpZE?rel=0"     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%;
}

【问题讨论】：

[this][1] 讨论应该对您有所帮助。 [1]：stackoverflow.com/questions/18282318/…

标签： html css youtube css-float

【解决方案1】：

詹姆斯首先，这个问题有点模棱两可，因为你说导航栏 {float:left} 和同一个导航栏再次向右浮动。但是我假设它们是不同的导航栏。但如果它们相同，那么这个概念就有问题。

检查您的代码，css 代码有一个名为 videoWrapper 的类，但您将 video-wrapper 分配给了 youtube 视频 iframe。由于该视频包装器未在 css 文件中定义，因此浏览器将其呈现在默认的 flowlayout 中。尝试更改类名以使它们保持一致。

【讨论】：

我实际上最终添加了代码 iframe{0 right-floated-width 0 left-floated-width;}