我想使用一個(gè)4:3的視頻作為網(wǎng)站的背景。然而，將寬度和高度設(shè)置為100%不起作用，因?yàn)榭v橫比保持不變，所以視頻不會(huì)填充網(wǎng)站的整個(gè)寬度。
這是我的HTML和CSS代碼。
HTML:
<!DOCTYPE HTML>
<html land="en">
<head>
<link rel="stylesheet" type="text/css" href="html5video.css" />
<title>html 5 video test</title>
</head>
<body id="index">
<video id="vidtest" autoplay>
<source src="data/comp.ogv" type="video/ogg" width="auto" >
</video>
<div class="cv">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</body>
</html>CSS:
body
{
background-color:#000000;
}
#vidtest {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 200%;
height: 100%;
z-index: -1000;
}
.cv
{
width: 800px;
position:relative;
text-align:center;
margin-top: 100px;
color:#FFFFFF;
font-family:"Arial";
font-size: 10px;
line-height: 2em;
text-shadow: 3px 3px 2px #383838;
margin-left: auto;
margin-right: auto;
}我知道這是一個(gè)很老的話題，我提出的并不一定是你正在尋找的解決方案，而是針對(duì)所有因?yàn)樗阉魑宜阉鞯膬?nèi)容而來(lái)到這里的人:縮放視頻以填充視頻容器元素，保持比例完整
如果您希望視頻填充& lt視頻& gt元素，但是視頻被正確地縮放以填充容器，同時(shí)保持縱橫比不變，您可以使用object-fit對(duì)CSS做到這一點(diǎn)。與背景圖片的背景尺寸非常相似，您可以使用以下內(nèi)容:
video {
width: 230px;
height: 300px;
object-fit: cover;
}希望這能對(duì)一些人有所幫助。
編輯:適用于除IE之外的大多數(shù)瀏覽器
您可以使用:
min-width: 100%;
min-height: 100%;http://www . code synthesis . co . uk/tutorials/html-5-全屏響應(yīng)-視頻
http://dev . opera . com/articles/view/everything-you-need-to-know-on-html 5-video-and-audio/
[...]與img元素的方式相同—如果您僅設(shè)置寬度和高度中的一個(gè)，則另一個(gè)維度會(huì)自動(dòng)進(jìn)行適當(dāng)調(diào)整，以便視頻保持其縱橫比。但是，與img元素不同的是，如果您將寬度和高度設(shè)置為與視頻的縱橫比不匹配的值，則視頻不會(huì)被拉伸以填充該框。相反，視頻保留了正確的寬高比，并在視頻元素內(nèi)被信箱化。在保持縱橫比的同時(shí)，視頻將在視頻元素中盡可能大的呈現(xiàn)。
對(duì)我有用的是
video {
object-fit: fill;
}昨天我發(fā)現(xiàn)了這個(gè)問(wèn)題，并一直在努力尋找答案。這有點(diǎn)類似于Jim Jeffers的建議，但是它適用于x和y縮放，使用javascript語(yǔ)法，并且只依賴于jQuery。它似乎工作得很好:
function scaleToFill(videoTag) {
var $video = $(videoTag),
videoRatio = videoTag.videoWidth / videoTag.videoHeight,
tagRatio = $video.width() / $video.height();
if (videoRatio < tagRatio) {
$video.css('-webkit-transform','scaleX(' + tagRatio / videoRatio + ')')
} else if (tagRatio < videoRatio) {
$video.css('-webkit-transform','scaleY(' + videoRatio / tagRatio + ')')
}
}你會(huì)遇到一些問(wèn)題，如果你使用本機(jī)控制，因?yàn)槟憧梢钥吹皆谶@把小提琴:http://jsfiddle.net/MxxAv/
由于我當(dāng)前項(xiàng)目中的所有抽象層，我有一些不尋常的需求。因此，我在示例中使用了一個(gè)包裝器div，并在包裝器內(nèi)將視頻縮放到100%,以防止在我遇到的一些極端情況下出現(xiàn)問(wèn)題。
如果“適合對(duì)象”屬性對(duì)您不起作用(WebView、Android等。)，你可以自己算算你視頻的高度。
例如，對(duì)于視頻16:9，高度為calc(100vw * 9 / 16)
.video-wrapper {
width: 100%;
height: calc(100vw * 9 / 16);
position: relative;
}
video {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}我用它來(lái)填充寬度或高度...(需要jQuery) 這將保持縱橫比并填充div。我知道這個(gè)問(wèn)題是為了打破長(zhǎng)寬比，但這是沒(méi)有必要的。
var fillVideo = function(vid){
var video = $(vid);
var actualRatio = vid.videoWidth/vid.videoHeight;
var targetRatio = video.width()/video.height();
var adjustmentRatio = targetRatio/actualRatio;
var scale = actualRatio < targetRatio ? targetRatio / actualRatio : actualRatio / targetRatio;
video.css('-webkit-transform','scale(' + scale + ')');
};只要& lt視頻& gt寬度和高度設(shè)置為100%,并且你的容器div有css溢出:隱藏，只需給它傳遞視頻標(biāo)簽。
var vid = document.getElementsByTagName("video")[0];
fillVideo(vid);正確的CSS選項(xiàng)是object-fit:contain；
以下示例將在屏幕寬度上拉伸背景圖像(同時(shí)打破縱橫比)，并保持恒定的固定高度。
body {
background-image:url(/path/to/background.png)
background-repeat: no-repeat;
background-position: top center;
background-size: 100% 346px;
object-fit: contain;
}對(duì)于OP上下文中的視頻，它將是:
video#vidtest {
width: 100%;
height: 100%;
object-fit: contain;
}經(jīng)過(guò)一番掙扎，這就是我的結(jié)局。它會(huì)在合適的時(shí)候自動(dòng)縮放視頻。
var videoTag = $('video').get(0);
videoTag.addEventListener("loadedmetadata", function(event) {
videoRatio = videoTag.videoWidth / videoTag.videoHeight;
targetRatio = $(videoTag).width() / $(videoTag).height();
if (videoRatio < targetRatio) {
$(videoTag).css("transform", "scaleX(" + (targetRatio / videoRatio) + ")");
} else if (targetRatio < videoRatio) {
$(videoTag).css("transform", "scaleY(" + (videoRatio / targetRatio) + ")");
} else {
$(videoTag).css("transform", "");
}
});只需將代碼放在$(文檔)中。ready()塊。
在Chrome 53、Firefox 49、Safari 9、IE 11上測(cè)試過(guò)(IE確實(shí)正確地縮放了視頻，但可能會(huì)圍繞它做其他有趣的事情)。
我發(fā)現(xiàn)這個(gè)問(wèn)題的唯一解決方案是，你將視頻的寬度和高度增加rem單位，就像這樣:
width: 188rem;
height: 60rem;
position: relative;
-o-object-fit: cover;
object-fit: cover;如果你有一個(gè)覆蓋div，它是視頻標(biāo)簽的兄弟，設(shè)置它的高度為100%
最后設(shè)置父高度以匹配視頻標(biāo)簽高度，在本例中:
text-align: center;
position: relative;
overflow: hidden;
height: 60rem;這對(duì)我很有效。