響應網站

我正在嘗試構建一個簡單的響應站點。響應網站

大多數情況下，一切正常。但只要我開始縮小網站，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>

來源

2013-06-02 Ctrice

http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php – SLaks

您還應該有一個用於浮動元素的容器。 –

您將不得不考慮您希望網站如何響應較小的屏幕尺寸。你真的希望廣告和視頻在一行上保持並排嗎（這就是你的意思是「對齊」？）？如果是這樣，您必須希望廣告縮小以及視頻 - 比例應該改變？（考慮廣告和視頻最終會在手機上產生多少）。如果不是，那麼您希望在小屏幕上顯示哪個廣告位：廣告或視頻？ – davidtheclark

的問題將在於與iframe中。我希望自己能夠記住所有的血腥細節，但最好從谷歌專家那裏獲取Scott Jehl and "responsive and responsible"視頻和任何您可以找到的文章（其中有很多）。他的具體問題是通過iframe傳送到波士頓地球的廣告。您的問題可能是視頻位於iframe中。

我知道我們不會給出答案爲「Google for it」，但我的答案指向iframe，並且傑爾提出的許多問題最好留給他。

來源

2013-06-02 20:50:14 Rob

即使我將youtube嵌入代碼從#trailer div中取出，當我開始調整頁面大小時，它仍會彈出到新行。 – Ctrice

此代碼似乎適用於我。當您將高度除以視頻的寬度時，會找到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的P- Pé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; 
}`

希望它爲你好運！

來源

2013-06-04 14:15:07 BRich

回答

相關問題