使視頻匹配它的父容器（使用vh和vw單元）的大小

我有一個容器內的視頻元素，我希望它填充所述父容器（相當於background-大小：封面;用於背景圖像）。視頻的父容器使用vw和vh單元。使視頻匹配它的父容器（使用vh和vw單元）的大小

我真的很掙扎。我可以通過使用寬度來適應寬度：100％，但height：auto不會填充容器的高度，並且使用與父元素相同的vw和vh度量也不成功。

我將如何處理這個問題 - 我似乎是繞着圈/拉我的頭髮。

這是否需要JS解決方案？

任何想法都會很棒。代碼和Codepen鏈接如下。

codepen：https://codepen.io/pauljohnknight/pen/EXwbzz

var video = document.getElementsByTagName('video'); 
 
video[0].play(); 
 
video[0].loop = true; 
 
video[0].controls = false;

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.videoholder { 
 
    background: #666; 
 
    height: 150vh; 
 
    width: 50vw; 
 
} 
 

 
video { 
 
    width: 100%; 
 
    height: auto; 
 
}

<div class="wrapper"> 
 
    <div class="videoholder"> 
 
    <video src="https://www.marketing-people.com/wp-content/uploads/2017/02/bakerbox-mockup.mp4" class="myvideo"></video> 
 
    </div> 
 
</div>

來源

2017-06-26 Paul12_

您可以絕對位置的視頻標籤，以填補父容器，然後在視頻標籤使用object-fit: cover;。

https://codepen.io/anon/pen/Xgexdj

更新：這不會在IE的任何版本。這是一種填充工具，將獲得它在IE工作8 - 11 https://github.com/jonathantneal/fitie

來源

2017-06-26 11:30:13 WizardCoder

感謝@wizardcoder這是偉大的。我也看到，正在滾動的IE（Edge 16）的下一個更新現在有了這個屬性。我會添加polyfill來掩飾我自己等。 –

的圖像等，如果使用width:100%和height:auto，視頻需要它的原始尺寸和放大/減少他們，使其適合整個寬度，而且還保持原來的高寬比

如果您希望視頻上伸展高度，還設置width:100%不會工作，因爲它會盡量保持原有的高寬比

類似於使用background-size:cover（即切掉所以它可以填充整個包裝，但也保持比例），你可以使用width:auto，height:100%，連同overflow:hidden在包裝

var video = document.getElementsByTagName('video'); 
 
video[0].play(); 
 
video[0].loop = true; 
 
video[0].controls = false;

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.videoholder { 
 
    overflow:hidden; 
 
    height: 150vh; 
 
    width: 50vw; 
 
\t background:url("http://lorempixel.com/1140/450/") no-repeat scroll center top /cover #666; 
 
} 
 

 
video { 
 
    width: auto; 
 
    height: 100%; 
 
}

<div class="wrapper"> 
 
    <div class="videoholder"> 
 
    <video src="https://www.marketing-people.com/wp-content/uploads/2017/02/bakerbox-mockup.mp4" class="myvideo"></video> 
 
    </div> 
 
</div>

來源

2017-06-26 11:30:56

感謝Mihai。我確實需要一個使用視頻元素的解決方案，因此我將其他答案標記爲正確，但這對了解情況也非常有用。非常感激。 –

好。除了「overflow：hidden」。它確實使用視頻元素 –

使視頻匹配它的父容器（使用vh和vw單元）的大小

回答

相關問題