CSSでレスポンシブサイズに!shopifyにYouTube動画を埋め込む

レスポンシブ対応に

 

shopifyのページ内に
YouTubeの動画を埋め込むことができます!

 

  • 横幅いっぱいに埋め込みたい
  • レスポンシブ対応にしたい
  • YouTubeを埋め込むと全画面にできない
  • スマホ全画面に表示するサイズは?

 

こんな悩みを解決するために
私自身、調べました!

 

難しいコードを説明しているサイトも多く、
初心者には分からない・・

 

そんな中、
CSSでレスポンシブ対応できるコードを入力したら

 

横幅いっぱいに表示され、解決♪

 

shopify以外のサイトでも活用できるコードです。

 

備忘録としてまとめました!

 

実際に、
当サイトのshopifyに埋め込み。

 

レスポンシブ対応に
YouTubeを埋め込みしたページをチェック!→■

 

【参考にどうぞ】
パソコンでサイズを変えたり、
スマホから見てみてください。
レスポンシブ対応されていると思います。

 

 

【HTML】まずは、ちょこっと修正

レスポンシブ対応に!htmlの修正

 

htmlに

<div class="youtube">『埋め込みコード』</div>

 

※すべて半角で入力!
※「埋め込みコード」→載せたいYouTube動画のコード
※「<div class="youtube">」→div名はお好きな名前でOK!
分かりやすいように、「youtube」としています。

 

埋め込みコードを <div> で
囲み、htmlに追加しましょう!

 

htmlはこれで終了。

 

次は、
cssの作業に移ります。

 

 

【CSS】カスタマイズ編集!サクッと簡単に!

shopifyのCSSはどこにある?

オンラインストアの
「テーマ」→【アクション】>「コードを編集する」画面に
移動。

 

「Layout」
「Templates」

 

下の方を見ていくと、

 

「Assets」が出てきます。

 

shopify|備考欄表示

 

レスポンシブ対応に!CSSの修正

 

(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動画を取り入れると
集客アップにつながり、
分かりやすく伝えることができます。

 

競合他社との差別化にも◎

 

ただ、埋め込むだけでなく
スマホからの見やすさを忘れずに
設定しましょう♪