用響應式視頻填充引導列背景

我有一個網站網格，我正在努力顯示新的公告和博客文章。我有一個大型專欄（col-sm-8，涵蓋2/3頁），我希望有一個介紹性視頻（解釋/展示工作）。用響應式視頻填充引導列背景

我似乎無法得到一個視頻很好地發揮其作爲背景的這（與YouTube試圖嵌入和周圍的互聯網一對夫婦教程）我已經創建了一個像下面這更好的解釋：

任何幫助，或只是在正確的方向推將是超級讚賞！

感謝

更好的規模更新的圖像：

來源

2017-01-07 CGKeaton

你嘗試過什麼了嗎？你的代碼在哪裏？ – mlegg

嘿mlegg，我已經嘗試了一些東西，我通常不能獲得一個完整的填充視頻，涵蓋了整個列的區域。視頻的響應似乎很有效（即使嵌入了你的管子，但它永遠不會填充） - 我會在1秒內發佈一個我在這裏發佈的較老的模型，謝謝你的回覆。 – CGKeaton

你將無法得到一個YouTube視頻或任何視頻到區域內的完美呈現，所以我建議你調整您分配給視頻的空間到更好的視頻尺寸

來源

2017-01-07 17:34:10

嘿@Oily Barrett - 聽起來很正確，看看我更新的鏡頭。 – CGKeaton

好吧，您可能不應該使用嵌入的YouTube，以獲得最佳效果，您可以使用視頻HTML標記並將其設置爲適合該區域，但您確實需要本地存儲的視頻或您可以直接鏈接到該視頻的某個位置。 –

這裏是一個響應式的youtube嵌入代碼。寬度和高度由YouTube提供。你需要想出你想要的頁面的其餘部分。

/* Flexible iFrame */ 
 
    
 
.flexible-container { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
    padding-top: 30px; 
 
    height: 0; 
 
    overflow: hidden; 
 
} 
 
    
 
.flexible-container iframe, 
 
.flexible-container object, 
 
.flexible-container embed { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<!-- Responsive iFrame --> 
 
<div class="flexible-container"> 
 
<iframe width="560" height="315" src="https://www.youtube.com/embed/FSvNhxKJJyU" frameborder="0" allowfullscreen></iframe> 
 
</div>

來源

2017-01-07 22:14:55 mlegg

用響應式視頻填充引導列背景

回答

相關問題