18 Sep 08

怎样在Shopify独立站内插入自适应视频

大家好，我是iiizst的二号撰写人，Frank。我大学毕业后就开始从事Shopify建站工作，在Shopify建站实操上有比较丰富的经验，希望可以帮助到大家。

今天跟大家分享的是在Shopify独立站内插入自适应视频的方法。

Shopify独立站由于支持不同主题，主题也存在多种版本，实际上在视频的引用上也较为麻烦。

首先是最简单的方法，在内容编辑筐上方，点击视频图标，插入以<iframe开头的视频引用代码。这里就以最常用的YouTube视频为例。

第一步：点击“插入视频”按钮

Shopify视频引用 P1

第二步：点击目标视频的“分享”按钮

Shopify视频引用 P2

第三步：点击“Embed”按钮生成代码

Shopify视频引用 P3

第四步：点击“Copy”复制代码（下方选项按需要勾选）

Shopify视频引用 P4

第五步：将代码插入文本框，点击“Insert Video”

Shopify视频引用 P5

第六步：完成。预览页面，查看显示情况

Shopify视频引用 P6

第七步：也许你失败了，移动端显示不自适应。这时候就要祭出终极大法：“代码公式”。

复制下面这段代码，找到里面的“video link”部分，把它替换成你要引用的视频链接。即可。

<div class='embed-container'>
<iframe src=‘video link’ frameborder='0' allowfullscreen></iframe>
</div>
<style>
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>