视频将不会填充容器的宽度

问题描述：

正如您在我提供的视频中看到的视频不是全宽，我希望它适合容器的其余部分。谁能告诉我什么，我做错了，这里是图像： 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%; 
    } 
    }

把你的视频代码中的div fullscreen_bg内 –

感谢您的答复，我做到了，但还是同样的事情：/ –

答

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

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

您的浏览器不支持视频标签。 –

这会更好，你发布格式化的代码在你的答案，而不是评论。 –

视频将不会填充容器的宽度

相关推荐