我的Shopify页面上有一个自动播放的HTML视频包装器元素，它拒绝自动缩放到页面宽度。你可以在这里看到页面（www.filmmaker-cinematics.com），因为你可以看到两个视频元素在屏幕上出现了巨大的比例失调。

的，我已经将这些元素添加为“富文本”的一部分。允许HTML代码的页面上的元素。所以，所有的边距/页面宽度等都是预先编程的，这个视频应该自动缩放以适应。但它不是在打球。

的代码如下：

<div class="video-wrapper"><video autoplay="autoplay" muted="" loop="loop" playsinline="" preload="metadata">
  <source src="https://cdn.shopify.com/s/files/1/0522/8861/8684/files/EYES.mp4?v=1610122059" type="video/mp4" /></video></div>

的是，我保持这段代码不变，因为它是我发现的唯一一段允许在桌面和移动设备上自动播放的代码，这对页面设计很重要。

我确信有一些简单的“最大宽度”我可以添加代码，但我尝试的代码似乎都不起作用。有什么想法吗？

谢谢了！

顺晟科技：

解释

一些.CSS必须修复，特别是，您必须指定width: 100%;到<video>中的元素。创建

<video>是为了在<video>元素，您可以参考本文了解更多信息。

<video>设置了margin-top以提供纵横比，并设置了padding-bottom标记不是最好的解决方案。（最好的解决方案是在主题的Assets文件夹中找到.CSS文件，但如果您没有经验，则可能会破坏内容）。

容易修复

为了简单地解决这个问题，我们将覆盖现有的样式..我假设您正在使用某种允许您添加HTML片段的页面生成器，因此您必须添加另一个HTML片段并粘贴以下代码

<代码><；样式>；.pages-content.video-wrapper{填充-顶部：0px；垫底：Calc（600/1920*100%）；顶部边距：25px；}.video-wrapper视频{宽度：100%；}<；/样式>；

所做的是：

1. 定义<代码>宽度：100%；用于视频元素。
2. 删除padding-top: 25px用于<video>并使用<style></style>改为.
<style> .pages-content .video-wrapper { padding-top: 0px; padding-bottom: calc(600/1920*100%); margin-top: 25px; } .video-wrapper video { width: 100%; }</style>上的<video>到padding-top: 25px;我使用了您的视频1920x600px的宽度和高度。