问题
I want to use a 4:3 video as a background on a site, but setting the width and height to 100% doesnt work, since the aspect ratio is kept intact, so the video doesnt fill the whole width of the site.
thanks for your help!
here is my html and css code
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;
}
回答1:
this a really old thread, I know, and what I'm proposing is not necessarily the solution you are looking for, but for all people that land here because of searching what I searched: scale the video to fill the video container element, keeping ratio intact
If you want the video to fill the size of the <video> element but the video is scaled correctly to fill the container while keeping the aspect ratio in tact you can do this with CSS using object-fit. Much like background-size for background images you can use the following:
video {
width: 230px;
height: 300px;
object-fit: cover;
}
I hope this can be of help for some people.
EDIT: works in most browsers but IE
回答2:
you can use:
min-width: 100%;
min-height: 100%;
http://www.codesynthesis.co.uk/tutorials/html-5-full-screen-and-responsive-videos
回答3:
http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/
[...] in the same way as the img element — if you only set one of width and height, the other dimension is automatically adjusted appropriately so that the video retains its aspect ratio. However — unlike the img element — if you set width and height to something that doesn't match the aspect ratio of the video, the video is not stretched to fill the box. Instead, the video retains the correct aspect ratio and is letterboxed inside the video element. The video will be rendered as large as possible inside the video element while retaining the aspect ratio.
回答4:
I work around this in javascript by comparing the ratio set on the element to the source video and then applying a CSS transform: https://gist.github.com/1219207
回答5:
Picked this up yesterday and have been wrestling for an answer. This is somewhat similar to Jim Jeffers suggestion, but it works for x and y scaling, is in javascript syntax and only relies on jQuery. It seems to work pretty well:
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 + ')')
}
}
You'll run into some issues if you are using the native controls as you can see in this fiddle: http://jsfiddle.net/MxxAv/
I have some unusual requirements because of all the abstraction layers in my current project. Because of that I'm using a wrapper div in the example and scaling the video to 100% inside the wrapper to prevent problems in some of the corner cases I have encountered.
回答6:
What worked for me is
video {
object-fit: fill;
}
回答7:
I use this to fill either width OR height... (requires jQuery) This KEEPS the aspect ratio and fills the div. I know the question was to break the aspect ration, but it isn't necessary.
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 + ')');
};
as long as the <video> has width and height set to 100% and your container div has css overflow:hidden just pass it the video tag.
var vid = document.getElementsByTagName("video")[0];
fillVideo(vid);
回答8:
The correct CSS option for this is object-fit: contain;
The following example will stretch a background image across the width of the screen (while BREAKING the aspect ratio), and maintaining a constant fixed height.
body {
background-image:url(/path/to/background.png)
background-repeat: no-repeat;
background-position: top center;
background-size: 100% 346px;
object-fit: contain;
}
For a video in the OP's context it would then be:
video#vidtest {
width: 100%;
height: 100%;
object-fit: contain;
}
回答9:
After some struggling, this is what I ended up with. It will automatically scale the video in the right moment.
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", "");
}
});
Just put that code in a $(document).ready() block.
Tested on Chrome 53 , Firefox 49, Safari 9, IE 11 (IE does scale the video correctly, but might do other funny stuff around it though).
来源：https://stackoverflow.com/questions/4000818/scale-html5-video-and-break-aspect-ratio-to-fill-whole-site