如何在有多個iframe時創建響應式iframe

這很好，直到我有2個或更多的iframe在同一個容器中，然後他們只是相互重疊，因爲它們都具有相同的絕對位置。如何在有多個iframe時創建響應式iframe

如何允許在容器內部容納任意數量的iframe以容納iframe並保持其縱橫比？

來自：https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed

的關鍵在於創造一個響應的YouTube嵌入是與填充和一個容器元素，其允許你給它的固定縱橫比。您也可以將此技術與大多數其他基於iframe的嵌入（如幻燈片）一起使用。

下面是一個典型的YouTube嵌入代碼是什麼樣子，有固定的寬度和高度：

<iframe width="560" height="315" src="//www.youtube.com/embed/yCOY82UdFrw" 
frameborder="0" allowfullscreen></iframe>

這將是很好，如果我們可以只給它一個寬度爲100％，但它無法正常工作高度保持不變。你需要做的是把它包在一個容器中，像這樣（注意類名和去除的寬度和高度）：

<div class="container"> 
<iframe src="//www.youtube.com/embed/yCOY82UdFrw" 
frameborder="0" allowfullscreen class="video"></iframe> 
</div>

，並使用以下CSS：

.container { 
    position: relative; 
    width: 100%; 
    height: 0; 
    padding-bottom: 56.25%; 
} 
.video { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

來源

2017-07-26 Glen Pierce

縱橫比將是棘手的表可能工作會是這樣好嗎？ – William

您是否建議將每個iframe放入表中？ –

我正在使用的HTML是用戶輸入，這是從一個富文本編輯器的輸出，我允許用戶輸入任意的HTML，其中可能包括iframe（我做一些洗刷，以避免惡意代碼）的輸出。 –

不要將2個視頻放在同一個容器中。放2個容器並將它們包裝在一個包裝中。然後將寬度和底部填充改爲任何你想要的。

.container { 
 
    position: relative; 
 
    width: 50%; 
 
    height: 0; 
 
    padding-bottom: 28.13%; 
 
    display:inline-block; 
 
    margin:0; 
 
} 
 
.video { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="wrapper"> 
 
    <div class="container"> 
 
    <iframe src="//www.youtube.com/embed/3Sdes6QuPro" frameborder="0" class="video"></iframe> 
 
    </div><div class="container"> 
 
    <iframe src="//www.youtube.com/embed/yCOY82UdFrw" frameborder="0" class="video"></iframe> 
 
    </div> 
 
</div>

來源

2017-07-26 01:33:52 Miro

這似乎不適用於任意數量的幀 – William

目前尚不清楚你的意思。當有10幀和只有1幀時，你想要有多少列？你想要他們並排還是隻是專欄？更清楚。 – Miro

如何在有多個iframe時創建響應式iframe

回答

相關問題