-1

正如您在图片中看到的那样,我提供的视频不是全宽的,我希望它适合容器的其余部分。谁能告诉我我做错了什么,这是图像: div 和视频的图像

编码:

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

1 回答 1

0

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

<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>
于 2017-10-28T10:24:54.093 回答