Html 视频 100% 宽度和高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20127763/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Video 100% width and height
提问by Milan
I have a video, and I want it to FILL 100% of the width, and 100% of the height. And keep the aspect ratio.
我有一个视频，我希望它填充 100% 的宽度和 100% 的高度。并保持纵横比。
Is it possible that it at least fills 100% for both? And if a bit of the video has to be out of the screen to keep the aspect ratio, that doesn't matter.
是否有可能至少为两者填充 100%？如果为了保持纵横比，必须将视频的一部分移出屏幕，那也没关系。
HTML:
HTML：
<video preload="auto" class="videot" id="videot" height="100%" preload>
<source src="BESTANDEN/video/tible.mp4" type="video/mp4" >
<object data="BESTANDEN/video/tible.mp4" height="1080">
<param name="wmode" value="transparent">
<param name="autoplay" value="false" >
<param name="loop" value="false" >
</object>
CSS:
CSS：
.videof, .videot {
width: 100% !important;
height: 100% !important;
}
采纳答案by Gladstone24
You can use Javascript to dynamically set the height to 100% of the window and then center it using a negative left margin based on the ratio of video width to window width.
您可以使用 Javascript 将高度动态设置为窗口的 100%，然后根据视频宽度与窗口宽度的比率使用负左边距将其居中。
var $video = $('video'),
$window = $(window);
$(window).resize(function(){
var height = $window.height();
$video.css('height', height);
var videoWidth = $video.width(),
windowWidth = $window.width(),
marginLeftAdjust = (windowWidth - videoWidth) / 2;
$video.css({
'height': height,
'marginLeft' : marginLeftAdjust
});
}).resize();
回答by Leo Yu
By checking other answers, I used object-fit in CSS:
通过检查其他答案，我在 CSS 中使用了 object-fit：
video {
object-fit: fill;
}
From MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit):
来自 MDN ( https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)：
The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.
object-fit CSS 属性指定被替换元素的内容应该如何适应由其使用的高度和宽度建立的框。
Value: fill
值：填充
The replaced content is sized to fill the element's content box: the object's concrete object size is the element's used width and height.
被替换的内容的大小可以填充元素的内容框：对象的具体对象大小是元素使用的宽度和高度。
回答by Fabian Schultz
If you're looking for the equivalent to background-size: coverfor video.
如果您正在寻找等价于background-size: coverfor video。
video {
object-fit: cover;
}
This will fill the container without distorting the video.
这将填充容器而不会扭曲视频。
PS: I'm extending on Leo Yu's answerhere.
PS：我在这里扩展了Leo Yu 的回答。
回答by JerryHuang.me
video {
width: 100% !important;
height: auto !important;
}
Take a look here http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
看看这里 http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
回答by hussein sayed
Easiest & Responsive.
最简单和响应迅速。
<body>
<video src="full.mp4" autoplay muted loop></video>
</body>
video {
height: 100vh;
width: 100%;
object-fit: fill;
position: absolute;
}
回答by Lee Chun Hoe
This works for me for video in a div container.
这对我来说适用于 div 容器中的视频。
.videoContainer
{
position:absolute;
height:100%;
width:100%;
overflow: hidden;
}
.videoContainer video
{
min-width: 100%;
min-height: 100%;
}Reference: http://www.codesynthesis.co.uk/tutorials/html-5-full-screen-and-responsive-videos
参考：http: //www.codesynthesis.co.uk/tutorials/html-5-full-screen-and-responsive-videos
回答by asdf
I use JavaScript and CSS to accomplish this. The JS function needs to be called once on init and on window resize. Just tested in Chrome.
我使用 JavaScript 和 CSS 来实现这一点。JS 函数需要在 init 和窗口调整大小时调用一次。刚刚在 Chrome 中测试。
HTML:
HTML：
<video width="1920" height="1080" controls>
<source src="./assets/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
JavaScript:
JavaScript：
function scaleVideo() {
var vid = document.getElementsByTagName('video')[0];
var w = window.innerWidth;
var h = window.innerHeight;
if (w/16 >= h/9) {
vid.setAttribute('width', w);
vid.setAttribute('height', 'auto');
} else {
vid.setAttribute('width', 'auto');
vid.setAttribute('height', h);
}
}
CSS:
CSS：
video {
position:absolute;
left:50%;
top:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
回答by Alex Durston
This is a great way to make the video fit a banner, you might need to tweak this a little for full screen but should be ok. 100% CSS.
这是使视频适合横幅的好方法，您可能需要稍微调整一下以全屏显示，但应该没问题。100% 的 CSS。
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);回答by Jadson Matos
<style>
.video{position:absolute;top:0;left:0;height:100%;width:100%;object-fit:cover}
}
</style>
<video class= "video""
disableremoteplayback=""
mqn-lazyimage-video-no-play=""
mqn-video-css-triggers="[{"fire_once": true, "classes": [".mqn2-ciu"], "from": 1, "class": "mqn2-grid-1--hero-intro-video-meta-visible"}]"
mqn-video-inview-no-reset="" mqn-video-inview-play="" muted="" playsinline="" autoplay>
<source src="https://github.com/Slender1808/Web-Adobe-XD/raw/master/Home/0013-0140.mp4" type="video/mp4">
</video>回答by Ryan
Put the video inside a parent div, and set all to 100% width & height with fill of cover. This will ensure the video isn't distorted and ALWAYS fills the div entirely.
将视频放在父 div 中，并将所有内容设置为 100% 宽度和高度，并填充封面。这将确保视频不会失真，并且始终完全填充 div。
.video-wrapper {
width: 100%;
height: 100%;
}
.video-wrapper video {
object-fit: cover;
width: 100%;
height: 100%;
}
