Question

正如您在图像中看到的那样，我提供的视频不是全宽，我希望它适合容器的其余部分。任何人都可以告诉我我做错了什么，这是图像： Image of the div and video

代码：

HTML

<section class="content-2">
     <div class="fullscreen_bg"> 
     <video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg_video">
            <source src="images/Ajvar.mp4" type="video/mp4">
            <source src="movie.ogg" type="video/ogg">
            Your browser does not support the video tag.
     </video></div>
    </section>

CSS

.content-2 {

height: 350px;
overflow: hidden; }

.fullscreen-bg {

max-height:350px;
width: 100%;
height: 100%;
position: relative;
padding:0;
margin:0;
left: 0px;
top: 0px;
z-index: -1000;
overflow:hidden;}


.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
z-index: -100;
background-size: cover;
overflow: hidden;}

@media (min-aspect-ratio: 16/9) {
 .fullscreen-bg__video {
   height: 300%;
   top: -100%;
       }
      }

@media (max-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
   width: 300%;
   left: -100%;
     }
   }

Answer 1

尝试视频标记的宽度属性：

<video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg_video" width="350" height="350">
    <source src="images/Ajvar.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

视频不会填充容器的宽度

1 个答案: