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

视频需要尊重它的比例，对吧？我不认为你可以改变你想要的宽度和高度......你可以改变＆＃34;视频＆＃34;的宽度和高度。标签，但视频显示将保持它的比例......所以解决方案实际上是2：

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

第二：使div溢出：隐藏并增加＆＃34;视频＆＃34;的宽度标记，直到视频本身的高度到达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;
}

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

如何使视频适合div？

1 个答案: