Question

我正在尝试构建一个简单的响应式网站。

大多数情况下一切正常。但是一旦我开始缩小网站，YouTube视频就会碰到下一行。有没有办法解决这个问题，以便它与左边的广告保持一致？

这是我正在使用的CSS。

#ad{ width:100%; max-width:288px; min-height:330px; margin-right:2%; float:left; }

#trailer{ width:100%; max-width:540px; min-height:330px; position:relative; float:left; }

#trailer iframe,
#trailer object,
#trailer embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

这是HTML代码：

<div id="ad"><img src="img/ad.jpg" alt="ad" /></div>

<div id="trailer">
<iframe width="460" height="315" src="http://www.youtube.com/embed/C4uOSz1Z9GM" frameborder="0" allowfullscreen></iframe>
</div>

Answer 1

问题在于iframe。我希望我能记住所有血腥的细节，但最好是通过谷歌搜索专家从Scott Jehl and "responsive and responsible"视频和你能找到的任何文章（其中有很多）中吸取教训。他的具体问题是通过iframe将广告传递到波士顿环球报。您的问题可能是视频位于iframe中。

我知道我们不会将答案称为“Google for it”，但我的答案指向了iframe，杰尔的许多观点最好留给他。

Answer 2

此代码似乎对我有用。当您将高度除以视频宽度时，会找到CSS中的百分比。

（HTML）

<div class="videoWrapper">  <iframe width="560" height="315" src="YourVideoURL" frameborder="0" allowfullscreen></iframe> </div>

（CSS）

`/ * / V I D E O * W R A P P E R / * /

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.videoWrapper iframe,
.videoWrapper embed,
.videoWrapper object {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}`

希望它能为你带来好运！

响应网站

2 个答案: