shopify - Shopify 的问题 - 液体
问题描述
我有一个视频,我正在尝试进入 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。既然现在都是液体?我对这一切都很陌生,尤其是视频。
解决方案
听起来这是您的标记和样式的问题。这通常通过常见的“视频包装”方法解决。下面的代码会将视频缩放到 .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%;
}
推荐阅读
- spring-webflux - Webflux Kotlin Coroutines Flow 不返回任何结果
- symfony - 使用 webpack 和 encore 在 symfony 4.2.9 中使用 toastr
- java - 如何初始化一个二维数组?
- bash - 如何在linux中使用bash按出现次数对字符串进行排序?
- r - 使用“as_factor”转换“haven_labelled”后标签丢失
- python - 从 Jupyter 笔记本中的 Joblib Parallel 函数中打印
- node.js - Firebase Web 身份验证未显示在本地主机中
- python - 如何创建一个用随机字符串填充列的熊猫数据框?
- javascript - 在 Javascript 中验证对象形状的简单方法
- powershell - Powershell - 自定义枚举作为脚本的参数