如何使视频适合div？答案

【问题标题】：How to make video fit into div?如何使视频适合div？
【发布时间】：2015-07-31 08:51:52
【问题描述】：

我需要一点帮助。我知道这篇文章之前已经完成，但无论我尝试什么都对我不起作用。所以基本上我有一个 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>

【问题讨论】：

你能提供一个小提琴吗？
@MattiaNocerino 给你jsfiddle.net/mjkvupmt

标签： html css html5-video

【解决方案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;
}

制作完成后，您可以随意放置视频

【讨论】：