在 shopify 中嵌入 youtube 视频，使用CSS响应尺寸

shopify是可以插入油管视频的。

直接粘贴嵌入代码的话，尺寸会很奇怪，移动端一定会超出很多。

我改了一下尺寸之后发现太麻烦了。

还是套个div吧。

接下来记录两种不同的显示方法。

（都是移动端响应式）

①指定宽度且居中

HTML

<div class=" youtube-wrap ">
　<div class=" youtube ">
　　<iframe> ... </iframe>
　</div>
</div>

CSS

/* 指定视频宽度的div */
.youtube-wrap {
max-width: 600px; /* 指定最大宽度为600px */
margin-left: auto;
margin-right: auto;
}

/* 套在视频外面的div */
.youtube {
position: relative;
width:100%; /* 宽度100% */
height:0;
padding-top: 56.25%; /* 指定高度(16:9) */
}
 
/* YouTube嵌入的iframe */
.youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

②全宽显示

如果用于没有侧边栏的单栏页面，全宽就会显得很大。

但是我更喜欢这种。

可能是看多了日本网站，更习惯主要区域非常窄的设计。

HTML

<div class="youtube">
　<iframe> ... </iframe>
</div>

CSS

/* 套在视频外面的div */
.youtube {
position: relative;
width:100%; /*宽度100% */
height:0; 
padding-top: 56.25%; /*指定高度(16:9) */
}

/* YouTube嵌入的iframe */
.youtube iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}