Shopify 的问题 - Liquid

Question

我有一个视频，我正在尝试进入 Shopify 的横幅广告。我在内容之前的 index.liquid 中有这个：

<iframe width="100%" height="830" src="the video hosted on wordpress site" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

问题是它不适合全屏桌面的宽度。它也不适用于移动设备。所有用户控件都可用。它会自动播放。我已经阅读了一些关于在 Shopify 中编辑 HTML 以完成此操作的旧主题，但它们已经过时，我无法再编辑 HTML。既然现在都是液体？我对这一切都很陌生，尤其是视频。

Screenshot1 Screenshot2

Answer 1

听起来这是您的标记和样式的问题。这通常通过常见的“视频包装器”方法解决。下面的代码会将视频缩放到 .video-wrapper 所在元素宽度的 100%。

html

<div class="video-wrapper">
  <iframe width="480" height="830" src="the video hosted on wordpress site" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

css

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Shopify 的问题 - Liquid

Trouble with Shopify - Liquid

liquid

shopify