如何使视频适合 div？

Question

我需要一点帮助。我知道这个 post 之前已经完成，但我尝试过的任何方法都不适合我。所以基本上我有一个 div，它是 300px x 250，我想在不将视频渲染到 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>

Answer 1

视频需要尊重它的比例，对吧？我不认为你不能随心所欲地改变宽度和高度......你可以改变 "video" 标签的宽度和高度，但视频显示会保持它的比例......所以解决方案实际上是 2:

首先：改变包含视频的div的宽度和高度，使视频的比例相同：

其次：使 div 溢出：隐藏并增加 "video" 标签的宽度，直到视频本身的高度达到 div 容器（如 fiddle)

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

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

如何使视频适合 div？

How to make video fit into div?

html

css

html5-video