Bootstrap響應式嵌入視頻佔用了整個屏幕的寬度和高度

我一直在試圖將視頻嵌入到引導程序網站。Bootstrap響應式嵌入視頻佔用了整個屏幕的寬度和高度

但是當我這樣做，它佔據了整個屏幕的寬度和高度。我希望桌面上的大小爲560px x 315px，桌面大小低於560px時，它應該是有響應的。

我用：

<div class="container-fluid"> 
    <div class="embed-responsive embed-responsive-16by9 div_style"> 
     <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/XGSy3_Czz8k" width="560" height="315" frameborder="0" allowfullscreen></iframe> 
    </div> 
</div>

當我嘗試通過添加div_style類max-width: 560px;和max-height:315px;定製div標籤，它改變了視頻寬度560像素，但身高佔據了整個頁面高度。

來源

2015-01-16 Rahul R. Rathi

嘗試添加**！important **，max-width：560px！important;最大高度：315px！重要。希望能幫助到你。 – mainronindeveloper

可以請你分享整個HTML文件,,,大塊代碼？其他部分可能有問題。 – Junaid

引導程序embed-responsive類使用padding-bottom來設置元素的「高度」。

您可以在媒體查詢中將此屬性與width一起更改爲所需的效果。

@media all and (min-width: 560px) { 
 
    .div_style { 
 
     width:560px; 
 
     padding-bottom:315px !important; 
 
    } 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> 
 

 
<div class="container-fluid"> 
 
    <div class="embed-responsive embed-responsive-16by9 div_style"> 
 
    <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/XGSy3_Czz8k" width="560" height="315" frameborder="0" allowfullscreen></iframe> 
 
    </div> 
 
</div>

來源

2015-01-16 05:39:42 Marcelo

這應該在OP的特定情況下工作，但如果視頻放在寬度大於560像素的寬度內，會導致問題。 – nHaskins

你錯過添加col-xs-12 col-sm-6 col-md-4 col-lg-2。像這樣的東西。

<div class="container-fluid"> 
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 padding-zero embed-responsive embed-responsive-16by9"> 
     <div id="foxnews"> 
      <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/KFGbHBbXG_g?modestbranding=1&amp;autohide=1&amp;showinfo=0&amp;rel=0" allowfullscreen="true"></iframe> 
     </div> 
    </div> 
</div>

來源

2015-01-16 05:40:06 Junaid

沒有工作..still顯示相同的問題... –

回答更新。 – Junaid

Bootstrap響應式嵌入視頻佔用了整個屏幕的寬度和高度

回答

相關問題