Html 如何使视频适合 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31741970/
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
How to make video fit into div?
提问by Virat Kohli
I need a bit of help. I know this post has been done before but whatever I tried didn't work for me. So basically I have a div which is 300px by 250 and I want to fit my video into this without rendering the video to 300 by 250. Could you please help me out thanks! :)
我需要一点帮助。我知道这篇文章以前已经写过，但是我尝试过的任何方法都不适合我。所以基本上我有一个 300 像素 x 250 的 div，我想将我的视频放入其中，而不会将视频渲染为 300 x 250。请您帮帮我，谢谢！:)
body {
margin: 0;
}
#banner{
position:fixed;
margin:0;
width:300px;
height:250px;
border: 1px solid red;
}
#banner video{
position: fixed;
width: 300px !important;
height: auto !important;
background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
background-size: cover;
transition: 1s opacity;
z-index:-1;
}<div id="banner">
<video autoplay poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" loop >
<!-- WCAG general accessibility recommendation is that media such as background video play through only once. Loop turned on for the purposes of illustration; if removed, the end of the video will fade in the same way created by pressing the "Pause" button -->
<source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4">
</video>
</div>回答by Mattia Nocerino
A video needs to respect it's proportion, right? I don't think you can't change the width and height like you want... you can change the width and height of the "video" tag, but the video displaying will mantain it's proportion... so the solutions are actually 2:
视频需要尊重它的比例，对吗？我不认为你不能像你想要的那样改变宽度和高度......你可以改变“视频”标签的宽度和高度，但是视频显示会保持它的比例......所以解决方案实际上是2：
First: change width and height of the div that contains the video, and make the same proportion of the video:
第一：改变包含视频的div的宽度和高度，使视频的比例相同：
Second: Make the div overflow: hidden and increase the width of the "video" tag until the height of the video itself reaches the div container (like in this fiddle)
第二：使div溢出：隐藏并增加“视频”标签的宽度，直到视频本身的高度到达div容器（如this fiddle）
https://jsfiddle.net/mjkvupmt/75/
https://jsfiddle.net/mjkvupmt/75/
#banner{
position:fixed;
margin:0;
width:300px;
height:250px;
border: 1px solid red;
overflow: hidden;
}
#banner video{
position: absolute;
width: 450px !important;
height: auto !important;
background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
background-size: cover;
transition: 1s opacity;
z-index:-1;
}
Once you made that, you can position the video as you want
完成后，您可以根据需要定位视频
