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

Answer 2

SELECT good_id, serial_number, (CASE WHEN serial_number IS NULL THEN SUM(count) ELSE 1 END) as sum_count
FROM invoice
GROUP BY good_id, serial_number

    #Hero_Video {
      position: relative;
      ....
    }

    /* Hero Video Style*/
    .hero_video{
        left: 50%;
        ...
        width: 100vw;
    }

”。用于类，“＃”用于ID。首先，我认为您的CSS在这里有问题

如何使该视频的宽度响应100％？

2 个答案: