嵌入一個響應的YouTube iframe來的頁面

下面的中心是我的代碼，我試圖居中的iframe，但它總是會留下！這裏是小提琴http://jsfiddle.net/4yL4od8j/嵌入一個響應的YouTube iframe來的頁面

.videowrapper { 
text-align : center; 
    float: none; 
    clear: both; 
    width: 100%; 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 25px; 
    height: 0; 
} 
.videowrapper iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
max-width: 700px; 
max-height: 400px; 
}

我的HTML

 <center> <div class="videowrapper "><iframe src="http://www.youtube.com/embed/VA770wpLX-Q?&rel=0&theme=light&autohide=1&color=white" frameborder="0" allowfullscreen></iframe></a></div></center>

來源

2014-11-25 Vishnu

的可能的複製[我該如何調整在引導中心的YouTube嵌入式視頻]（https://stackoverflow.com/questions/22433616/how-can-i-align -youtube-embedded-video-in-the-the-center-in-bootstrap） – 2017-08-08 18:23:19

爲了讓你框架中心你需要給你的videowrapper特定width並使marginleft和right爲auto。

.videowrapper { 
     float: none; 
     clear: both; 
     width: 700px;<-- Added--> 
     position: relative; 
     padding-bottom: 56.25%; 
     padding-top: 25px; 
     height: 0; 
     margin: 0 auto;<-- Added--> 
     max-width: 100%;<-- Added--> 
    }

Working fiddle

儘管你想使你的幀響應總是使用max-width: 100%您videowrapper。

來源

2014-11-25 12:40:48 Benjamin

這不會使它響應。請檢查標題 – Vishnu 2014-11-25 12:42:09

你可以檢查我更新的答案。 – Benjamin 2014-11-25 12:43:28

它搞砸了整個頁面..檢查http://totallyrockingz.com/temp/yt/ – Vishnu 2014-11-25 12:47:02

試試這個：

<div align="center"> 
<div class="videowrapper "><iframe width="560" height="315"   src="http://www.youtube.com/embed/VA770wpLX-Q?&rel=0&theme=light&autohide=1&color=white" frameborder="0" allowfullscreen></iframe></a></div> 
</div>

來源

2014-11-25 12:41:15 Phasmatis

不工作！請在發佈前測試 – Vishnu 2014-11-25 12:43:15

iframe元素上的寬度=「560」height =「315」的內聯樣式肯定會覆蓋任何css聲明。 – lharby 2014-11-25 12:44:07

我測試過了，似乎對我來說工作得很好。 – Phasmatis 2014-11-25 12:47:41

嵌入一個響應的YouTube iframe來的頁面

回答

相關問題