縮放iframe以適當地適合

因此，我使用我的website中的iFrame來顯示視頻，並將它放在div中以允許調整移動sties的大小，並使其更具響應性等。但是現在，如果顯示器iframe中的內容被截斷。縮放iframe以適當地適合

下面是IFRAME代碼：

<div class="wrapper"> 
<iframe src="https://player.vimeo.com/video/132695239?badge=0" width="960" height="540" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
</div> 
<style> 
.wrapper { 
    position: relative; 
    padding-bottom: 56.25%; /* 16:9 */ 
    padding-top: 25px; 
    height: 0; 
} 
.wrapper iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 
</style>

如果任何人都可以看到任何可能導致此行爲那麼我很想知道。

感謝

編輯：這裏是我試圖縮放DIV的代碼。寬度不會隨着頁面縮小而改變，因此高度也不會改變。任何想法？

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

來源

2015-07-13 dwinnbrown

我還沒有嘗試過，但你可能看看http://embedresponsively.com/ – bmurauer

@bmurauer感謝您的建議，但它基本上做同樣的事情，問題沒有解決。我無法向下滾動。 – dwinnbrown

你想在小屏幕上顯示視頻嗎？還是包括標題在內的一切？ – NateW

的問題是，您的包裝股利.splash-page .main-wrap設置爲position: absolute;和overflow-y: hidden;這不允許股利成長，以適應您的所有內容。

如果你改變你的CSS，包括這樣的事情：

.splash-page .main-wrap { 
    overflow-y: visible; 
    position: relative; 
}

它將使DIV增長，以適應您的所有內容。

如果您只想定位一個特定的寬度，您也可以將所有內容包裝在媒體查詢中。

@media all and (min-width: 1001px) { 
    ... 
}

目前你還會因爲你既上一個div和你的身體標記使用.wsite-background有一個複製的背景問題。如果你從你的身體標記中刪除這個類，它應該看起來更好。

來源

2015-07-13 13:56:49 NateW

謝謝，我剛剛在幾分鐘前發現了我的代碼，但在此處將標記爲其他用戶正確。 – dwinnbrown

你有任何想法如何縮放顯示iframe的div嗎？我將在上面添加div代碼。 – dwinnbrown

@dwinnbrown您的iframe響應我的行爲......（Safari和Chrome測試）您使用的瀏覽器是什麼？ – NateW

你的iframe有固定的。嘗試使用WIDTH =「100％」，而不是WIDTH =「960」

來源

2015-07-13 14:04:16

縮放iframe以適當地適合

回答

相關問題