0

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

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

这是演示站点的链接： http: //ctrice.ca/test/rwd/

这是我正在使用的 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>
4

2 回答 2

0

问题在于 iframe。我希望我能记住所有血淋淋的细节，但最好通过谷歌搜索Scott Jehl 和“响应和负责任”的视频以及您能找到的任何文章（其中有很多）从专家那里得到这个教训。他的具体问题是通过 iframe 向波士顿环球报投放的广告。您的问题可能是视频位于 iframe 中。

我知道我们不会像“Google for it”那样给出答案，但我的答案指向 iframe，Jiehl 提出的许多观点最好留给他。

于 2013-06-02T20:50:14.373 回答
0

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

(HTML)

<div class="videoWrapper"> <!-- Copy & Pasted from YouTube --> <iframe width="560" height="315" src="YourVideoURL" frameborder="0" allowfullscreen></iframe> </div>

(CSS)

`/*/视频*包装器/*/

.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;
}`

希望它对你有用，祝你好运！

于 2013-06-04T14:15:07.090 回答