css 视频元素未拉伸父分区的全长

k5ifujac 于 2023-08-08 发布在其他

关注(0)|答案(1)|浏览(89)

我试图创建一个响应式设计，其中视频元素使用类. hero拉伸其父div的全部长度。然而，尽管我的努力，视频似乎并没有扩大到预期的尺寸。下面是我使用的相关CSS代码：

HTML

<div class="hero">
  <video autoplay muted loop playsinline id="myVideo">
    <source src="/videos/aerial(2).mp4" type="video/mp4" />
  </video>
</div>

字符串

CSS

.hero{
position: relative;
z-index: 1;
height: 90vh;
width: 100%;
 }

 #myVideo {
   position: absolute;
   right: 0;
   bottom: 0;
   z-index: -1; 
   filter: brightness(65%);
   height: 100%;
   width: 100%;
  }

@media (min-aspect-ratio: 16/9) {
   #myVideo {
        width: auto;
        height: 100%;
    }
}

@media (max-aspect-ratio: 16/9) {
    #myVideo {
        width: auto;
        height: 100%;
    }
}

型
我已经检查了潜在的问题，如z索引冲突和其他冲突的样式，但我似乎不能指出问题所在。视频似乎被约束在原始尺寸内，并且没有完全拉伸以匹配父级.hero div。
是否有任何建议或解决方案来确保video元素适当地扩展以填充父div的整个长度，同时保持响应性？
所有版本的查询都有效，但常规桌面除外：

的数据

css

来源：https://stackoverflow.com/questions/76853149/video-element-not-stretching-full-length-of-parent-div

1条答案

按热度按时间

hc2pp10m1#

我会这样做：

.hero {
  position: relative;
  z-index: 1;
  height: 90vh;
  width: 100%;
  overflow: hidden; 
}

#myVideo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the video */
  z-index: -1;
  filter: brightness(65%);
  width: 100%;
  height: 100%;
  object-fit: cover; /* This makes sure the video covers the entire div */
}

@media (min-aspect-ratio: 16/9) {
  #myVideo {
    width: 100%;
    height: auto;
  }
}

@media (max-aspect-ratio: 16/9) {
  #myVideo {
    height: 100%;
    width: auto;
  }
}

个字符

赞(0）回复(0）举报 2023-08-08

我来回答

css 视频元素未拉伸父分区的全长

1条答案

相关问题

热门标签

最新问答