響應式iFrame視頻縮放，但不會居中

TL; DR：我需要縮放的iFrame以較大的屏幕尺寸爲中心。我知道這是由於方法中的絕對定位問題。響應式iFrame視頻縮放，但不會居中

我試圖嵌入一個iFrame（YouTube視頻專門）到一個網站。在2017年，我希望網站能夠做出反應，當然，我也希望嵌入式視頻能夠很好地響應。所以我在網上發現了一些代碼，這似乎是響應式調整iFrames的常用方法。我明白這裏發生了什麼。

相關HTML：

<div class="videoWrapper"> 
    <iframe width="530" height="315" src="https://www.youtube.com/embed/4OJWC1tn_t4" frameborder="0" allowfullscreen> 
    </iframe> 
</div>

相關CSS：

.videoWrapper { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    padding-top: 20px; 
    overflow: hidden; 
} 

.videoWrapper iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

This is where the above code gets us to.

這工作還算不錯，但在視頻佔據容器空間的100％。它應該，它是這樣編碼的。但是如果我不希望它那樣做呢？在較大的屏幕尺寸上看起來非常糟糕，因爲視頻佔據了整個窗口。我找不到讓這種情況不會發生的答案，所以我試着將我的「videoWrapper」放在另一個名爲「videoSizer」的位置，並將其縮小到60％，當height：auto時，屏幕尺寸大於480px。

相關HTML：

<div class="videoSizer"> 
    <div class="videoWrapper"> 
     <iframe width="530" height="315" src="https://www.youtube.com/embed/4OJWC1tn_t4" frameborder="0" allowfullscreen> 
     </iframe> 
    </div> 
</div>

相關CSS：

@media only screen and (min-width: 480px) { 
    .videoSizer { 
     width: 60%; 
     height: auto; 
    } 
}

This is where the above code gets us to.

因此，大小約，我想它，它看起來不錯的網頁上，但它卡住了在其容器的左上角。這就是它應該是的，它被編碼到容器中的絕對位置。它正在做我告訴它的。然而，我不明白，而這裏存在的問題是，當我改變位置編碼的方式時，我認爲目前爲止，容器大小保持不變，但iFrame元素消失。

所以我想以視頻爲中心，不佔用100％的窗口，但是沒有想法和知道如何發生這種情況。如果有人有任何建議，我會非常感激！我希望我已經以足夠描述的方式撰寫了這些文章，並且有足夠的資源來充分解釋問題。

答（信貸LKG幫我找到它）：

刪除上述@media查詢。沒有必要，並造成問題。
代碼與LKG的答案一致，如下所示。

要在此基礎上正確地計算底部填充： - 由邊緣寬度（我們稱之爲P1）除以元素寬度 - - 加保證金和元素寬度一起由寬度除以IFRAME元素的高度（這個P2） - 用P2 乘以P1 - 答案是新的填充底值

來源

2017-09-06 El Bear

只需更改CSS獲得中心

.videoWrapper iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right:0; 
    margin:auto; 
}

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.videoWrapper { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
    height: 0; 
 
    padding-top: 20px; 
 
    overflow: hidden; 
 
} 
 

 
.videoWrapper iframe { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
}

<div class="videoWrapper"> 
 
    <iframe width="530" height="315" src="https://www.youtube.com/embed/4OJWC1tn_t4" frameborder="0" allowfullscreen> 
 
    </iframe> 
 
</div>

來源

2017-09-06 16:17:44 LKG

問題不在於縮放，而在於定位。 –

好，所以你想要視頻進入中心？ – LKG

是的，這是正確的 –

響應式iFrame視頻縮放，但不會居中

回答

相關問題