iframe拒絕在容器div內部響應

我試圖在div內部使iframe響應，網上有大量關於如何做到這一點的資源，但常見的解決方案不適合我的情況下用於YouTube視頻嵌入。iframe拒絕在容器div內部響應

我正在使用Skeleton CSS Boilerplate。我有一個嵌套div結構如下所示：

<div class="container"> 
    <div class="row item"> 
     <div class="six columns"> 
      <iframe> </iframe> 
     </div> 
     <div class="six columns"> 
      <iframe> </iframe> 
     </div> 
    </div> 
</div>

的iframe被突出含div（類.six.columns）的右邊緣外側，所以我嘗試以下兩個css策略（下文）。

然而，每一種策略，已成爲巨大的，而且似乎已經採取的，而不是直接父的.containerdiv（或者也許是.rowdiv）的寬度，在.six.columnsdiv。

div > iframe { 
    position: absolute; 
    top:0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

和

div.six.columns iframe { 
    position: absolute; 
    top:0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

我只想，以響應裝進了.six.columnsdiv。我怎樣才能做到這一點？

來源

2015-12-24 thanks_in_advance

你加'div.six.columns {位置：相對;}'？ – Stickers

@Pangloss神奇，工作！但是現在這些視頻被擠得很高。如何使容器「div」的高度調整一下？ –

將容器設置爲position:relative以使absolute工作。

要保持視頻寬高比，請將iframe換成另一個div，然後使用padding技巧。假設視頻爲16:9，padding-bottom值爲9/16=56.25%。簡單的演示如下。

https://jsfiddle.net/dfkhkLhp/

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

<div class="youtube"> 
 
    <iframe src="https://www.youtube.com/embed/HkMNOlYcpHg" frameborder="0" allowfullscreen></iframe> 
 
</div>

來源

2015-12-24 04:54:28 Stickers

iframe拒絕在容器div內部響應

回答

相關問題