Youtube：嵌入式視頻擠壓

我通過iFrame API嵌入了YouTube視頻。視頻本身是方形的，它的寬度和高度取決於容器的大小（一個正方形以及流體尺寸） - 我使用CSS來實現這一點。Youtube：嵌入式視頻擠壓

一切工作或多或少不錯，但在開始和視頻的（在開始前和停止後）結束時，內容顯示與寬度減小，露出黑色側欄：

enter image description here

任何想法爲什麼發生這種情況或如何處理它？有人在響應式佈局的背景下製作了不規則形狀的視頻嗎？

更新

看來，寬度和高度設置爲101％幫助。但是，還不確定它是如何一致的。

來源

2013-05-08 polarblau

鏈接勝過千言萬語。：D – 2013-05-08 12:58:51

對不起，這個不在線atm ..我可以嘗試重現它作爲一個jsfiddle，也許。 – polarblau 2013-05-08 14:15:27

[將Youtube視頻縮小爲響應寬度]（http://stackoverflow.com/questions/15844500/shrink-a-youtube-video-to-responsive-width） – davidcondrey 2014-10-04 23:58:13

<div class="video_iframe_wr"> 
    <iframe/> 
</div> 


    .video_iframe_wr { 
    height: 0; 
    padding-bottom: 100%; /* that makes height = width */ 
    position: relative; 
} 

.video_iframe_wr > iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    width:100%; 
    height:100%; 
}

來源

2013-05-08 10:13:29 Vicky

感謝您的回答。不幸的是，這正是我目前使用的方法。 – polarblau 2013-05-08 11:54:10

Youtube：嵌入式視頻擠壓

回答

相關問題