Shopify 的问题 - 液体

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