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。 既然現在都是液體？ 我對這一切都很陌生，尤其是視頻。

截圖1 截圖2

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