CSSでレスポンシブサイズに！shopifyにYouTube動画を埋め込む
shopifyのページ内に
YouTubeの動画を埋め込むことができます！
- 横幅いっぱいに埋め込みたい
- レスポンシブ対応にしたい
- YouTubeを埋め込むと全画面にできない
- スマホ全画面に表示するサイズは？
こんな悩みを解決するために
私自身、調べました！
難しいコードを説明しているサイトも多く、
初心者には分からない・・
そんな中、
CSSでレスポンシブ対応できるコードを入力したら
横幅いっぱいに表示され、解決♪
shopify以外のサイトでも活用できるコードです。
備忘録としてまとめました！
実際に、
当サイトのshopifyに埋め込み。
【参考にどうぞ】
パソコンでサイズを変えたり、
スマホから見てみてください。
レスポンシブ対応されていると思います。
【HTML】まずは、ちょこっと修正
htmlに
<div class="youtube">『埋め込みコード』</div>
※すべて半角で入力！
※「埋め込みコード」→載せたいYouTube動画のコード
※「<div class="youtube">」→div名はお好きな名前でOK！
分かりやすいように、「youtube」としています。
埋め込みコードを <div> で
囲み、htmlに追加しましょう！
htmlはこれで終了。
次は、
cssの作業に移ります。
【CSS】カスタマイズ編集！サクッと簡単に！
shopifyのCSSはどこにある？
オンラインストアの
「テーマ」→【アクション】＞「コードを編集する」画面に
移動。
「Layout」
「Templates」
↓
↓
下の方を見ていくと、
「Assets」が出てきます。
（Assets)内に
↓
「stylesheet.css.liquid」クリック！
この中にコードを入力しますよ！
◎YouTubeのレシポンシブ用コード追加
【コピペOK】
私は追加するコードをCSSの一番下に
追加しました！
一番最後に追加する方が
跡から見て分かりやすいと思います！
.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}
↑↑
youtubeは、div名。
自分で決めたdiv名に変更してください！
最後に、保存 を忘れずに！
【注意】
右上に保存ボタンがあるので
意外にも忘れやすいんです。
最後に！確認を忘れずに
全画面表示になっているか、
- パソコンから
- スマホから
確認をして
レスポンシブ対応されていれば
終了です！
YouTube動画を取り入れると
集客アップにつながり、
分かりやすく伝えることができます。
競合他社との差別化にも◎
ただ、埋め込むだけでなく
スマホからの見やすさを忘れずに
設定しましょう♪