如何使视频适合div？

Question

我需要一些帮助.我知道这篇文章以前已经完成,但我试过的任何内容都不适合我.所以基本上我有一个300px到250的div,我想让我的视频适合这个而不用300到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>

Answer 1

视频需要尊重它的比例,对吧？我不认为你不能像你想要的那样改变宽度和高度......你可以改变"视频"标签的宽度和高度,但视频显示将保持它的比例......所以解决方案实际上是2:

首先:更改包含视频的div的宽度和高度,并使视频的比例相同:

第二步:使div溢出:隐藏并增加"video"标签的宽度,直到视频本身的高度到达div容器(就像在这个小提琴中)

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;
}  

完成后,您可以根据需要定位视频