Youtube的iframe響應和左浮動

Question

我需要做一個YouTube的IFRAME響應，並且該iframe是浮動以添加內容的權利，我試着用這段代碼，但IFRAME沒有響應？

謝謝。

的的jsfiddle：http://jsfiddle.net/94150148/vh04d7y2/

.videoWrapper { 
 
\t position: relative; 
 
\t padding-bottom: 51.44%; /* 16:9 */ 
 
\t padding-top: 25px; 
 
\t height: 0; 
 
} 
 
.videoWrapper iframe { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t width: 100%; 
 
\t height: 100%; 
 
} 
 
.box1 { 
 
     float:left; 
 
     width: 400px 
 
}

<div class="box1"> 
 
<div class="videoWrapper"> 
 
<iframe width="560" height="315" src="https://www.youtube.com/embed/6apL89xgbR0" 
 
frameborder="0" allowfullscreen></iframe></div></div> 
 
<div class="box2">Some text</div>

Answer 1

我會建議使用Bootstrap作出響應其中添加嵌入式視頻通過iframe，以下代碼可用於使iframe響應

<!-- 16:9 aspect ratio --> 
<div class="embed-responsive embed-responsive-16by9"> 
    <iframe class="embed-responsive-item" src="..."></iframe> 
</div> 

<!-- 4:3 aspect ratio --> 
<div class="embed-responsive embed-responsive-4by3"> 
    <iframe class="embed-responsive-item" src="..."></iframe> 
</div> 

但請確保添加bootstrap.css和其他引導依賴項。

Answer 2

所有你需要的是最大寬度：

.left {max-width: 400px;}