嵌入YouTube視頻佈局問題

在this page嵌入的YouTube視頻顯示在標題爲「類似節日」的輪播的左側。用於嵌入的YouTube視頻的HTML是：嵌入YouTube視頻佈局問題

的YouTube部分的HTML是：

<div class="span4 spacer youtube"> 
    <div class="title clearfix"> 
     <h2 class="pull-left">YouTube</h2> 
    </div> 
    <iframe width="1000" height="1000" src="http://www.youtube.com/embed/NI8rQEHoE24"></iframe> 
</div>

頁（使用響應引導電網）的設計是這樣的視頻應該有相同的身高作爲它右側的旋轉木馬，但正如你所看到的，它不知怎麼的突破了它的父容器。我希望視頻與其右側的旋轉木馬一致，我該如何解決這個問題。

下面是截圖，以便對我所指的內容有任何疑問！

enter image description here

來源

2012-12-16 Dónal

我的猜測是，您使用的是來自Youtube的嵌入腳本來完成它，並且該腳本正在破壞佈局，因爲它在'.row'的css渲染完成後嵌入播放器對象。檢查您的網頁並不能提供真實的代碼：您是否在使用YouTube的標準嵌入代碼？ –

@adityamenon你的意思是「檢查你的頁面並沒有給我真正的代碼」。如果您查看頁面的源代碼，您將獲得真實的代碼。 –

啊，是的，這是一個知道如何使用汽車並忘記如何行走的案例。對不起，我只使用開發者工具。 –

我注意到，row-fluid容器動態加入33％的寬度到您的Youtube視頻。因此，無論您設定的寬度期望值是由該類別重置的。

試試這個：

<div class="row-fluid"> 


    <div class="span4 spacer twitter"> 
    </div> 


    <!-- Youtube --> 
    <div class="span4 spacer youtube"> 
     <div class="title clearfix"> 
      <h2 class="pull-left">YouTube</h2> 
     </div> 
<iframe height="150px" src="http://www.youtube.com/embed/NI8rQEHoE24"></iframe>   
    </div> 

    <!-- Similar Carousel --> 
    <div class="span4 spacer"> 

     <div id="similarCarousel" class="carousel slide last"> 
     </div> 
    </div> 

</div>

（帽尖到外星人先生）

它只設置iframe高度。整個排液容器有點膨脹，高度不規則。但是，您沒有「跳出容器」問題。

來源

2012-12-16 14:48:43

而不是

<iframe id="fitvid811516" 
    src="Festivals.ie%20_%20Electric%20Picnic%202012_files/NI8rQEHoE24.htm"> 
</iframe>

使用此

<iframe width="640" height="360" 
    src="http://www.youtube.com/embed/NI8rQEHoE24?feature=player_detailpage" 
frameborder="0" allowfullscreen> 
</iframe>

並手動調整寬度和高度。動態調整大小的iframe不太好。

此外，如果你不想打破布局，但也不想中更改的內容，你也可以去到父容器，HTML，並設置overflow: hidden

.fluid-width-video-wrapper { 
    overflow:hidden; 
}

注意，這會修復你的佈局，但打破iframe;播放控件所在的底部部分將隱藏起來。

來源

2012-12-16 15:02:44

嵌入YouTube視頻佈局問題

回答

相關問題