0
我在尋找一個HTML & CSS方式來顯示這個嵌入視頻作爲一個75vh高度的英雄背景。全寬Youtube嵌入英雄背景視頻
現在，iFrame保留他的width: 100%和他的height: 75vh，但其中的圖像不覆蓋整個標題寬度。
其實，我需要它像一個background-size: cover財產。
這裏是一個快速附加的jsfiddle來說明這個問題，最好的方式來看它是在一個新的標籤。
PS：我知道有文章談到的那種問題的負載，但我沒有發現我工作的解決方案。
body {
background: #aaa;
margin: 0;
padding: 0;
height: 2000px;
}
body {
background: #aaa;
margin: 0;
padding: 0;
height: 2000px;
}
header {
background: #ddd;
height: 75vh;
width: 100%;
}
.video__wrapper {
position: relative; padding-bottom: 53.25%; /* 16:9 */ padding-top: 25px;
}
.video__inner {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
min-height: 100%;
}<body>
<header>
<iframe src="https://www.youtube.com/embed/w7Ap0k7qp2k?autoplay=1&loop=0&rel=0&showinfo=0&controls=0&autohide=1" frameborder="0" class="video__inner"></iframe>
</header>
<main></main>
</body>編輯
本文介紹瞭如何才能使用HTML & CSS只是一種 「作物」 的視頻，使其覆蓋到整個視。
與這個偉大的codepen
https://codepen.io/cvn/pen/WbXEoX?q=youtube+object+fit&limit=all&type=type-pens
這裏codepen鏈接，可能會幫助您https://codepen.io/dudleystorey看到它在行動/ pen/PZyMrd？editors = 0100 – amyogiji
我已經嘗試過這個解決方案，但它適用於完整的頁面e背景視頻。我需要它的英雄背景視頻，iFrame封面完整的widh＆高度，但圖像是由黑色邊框圓形。它更像是一個'background-size：contain'而不是'background-size：cover'行爲:) –
其實我只是偶然發現這個帖子： > https://codepen.io/cvn/pen/WbXEoX?q= youtube + object + fit＆limit = all＆type =類型筆 它的功能就像一個魅力。我甚至不知道如何，但我會花一點時間來了解所有這些邏輯，並會對我自己的問題發表一個答案！ –