如何强制Shopify页面中video wrapper自动适配页面布局尺寸

解决方法 #

你不需要修改原有视频的核心代码，直接添加CSS样式即可实现自适应适配，同时完全保留桌面+移动端的自动播放兼容效果，有两种操作方式可选：

• 直接在你插入到rich text的HTML代码最开头追加以下style代码，保存即可生效：

<style>
.video-wrapper {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 若需要完整显示视频不裁剪，将下面的cover改为contain即可 */
  object-fit: cover;
}
</style>

注：aspect-ratio的值可以替换为你的视频实际宽高比，比如你的视频是4:3就改为4/3。

• 全局添加（后续所有同类video-wrapper都能生效）：进入Shopify后台「在线商店」-「主题」，点击当前主题的「自定义」按钮，在侧边栏找到「主题设置」板块，选择「自定义CSS」，将上述CSS代码（去掉外层的<style>和</style>标签）粘贴进去保存即可。

如果添加后还是有边距异常，可在.video-wrapper的样式规则中追加padding: 0 !important;覆盖主题rich text元素的默认边距即可。

内容的提问来源于stack exchange，提问作者Fraser James