html - 如何使此视频的宽度 100% 响应？

Question

我正在创建一个 Shopify 网站，我想在顶部显示一个英雄视频。但是视频莫名其妙的偏右了，左边一片空白。任何人都知道如何让它 100% 响应？我对编码知之甚少，但我已尽我所能……感谢任何帮助。

找了三天都没找到...

我的网站在这里:https://v3xt5u4y7es2qbjl-22601531467.shopifypreview.com

目前顶部的视频不是我想要的。其实我只想保留第二个视频。

HTML

<div id="hero_video">
<video autoplay="" playsinline="" muted="" loop="" id="Hero_Video">
  <source src="https://cdn.shopify.com/s/files/1/0226/0153/1467/files/background_video_1.mp4?1009" type="video/mp4">
</video>
</div>

CSS

#Hero_Video {
  position: relative;
  width: 100vw;
  max-height: 100%;
}

/* Hero Video Style*/
.hero_video{
    left: 50%;
    margin-left: -200vw;
    margin-right: -50vw;
    max-width: 100vw;
    position: relative;
    right: 50%;
    width: 100vw;
}

Answer 1

将宽度 100% 添加到您的视频，它应该可以工作

#Hero_Video {
    width: 100%;
}