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

レスポンシブ対応に

 

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

 

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

 

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

 

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

 

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

 

スマホで横幅いっぱいに表示され、解決♪

 

ワードプレスなど shopify以外のサイトでも活用できるコード です。

 

\【重要】check/
※ワードプレス(cocoon)で起きた不具合の解決策をページの最後部でご紹介!詳細はこちらから!

 

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

 

※3パターンのCSS編集をご紹介♪
すべてスマホのレスポンシブ対応のコードです。

  1. おすすめ度1:中央寄せ横幅指定
  2. おすすめ度2:横幅指定
  3. おすすめ度3:横幅いっぱい100%

 

 

 

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

 

\※横幅指定をしたshopifyのページ/
レスポンシブ対応に
YouTubeを埋め込みしたページをチェック!→■
レスポンシブ対応に
YouTubeを埋め込みしたページをチェック!→■

 

▼実際に、不具合が起きたワードプレスのサイトに修正させた後の埋め込み。
YouTubeを埋め込みしたページをチェック!→■

 

レスポンシブ対応に
\※横幅いっぱい100%と横幅指定をした事例のページ/
YouTubeを5パターン埋め込みしたデモページをチェック!→■

 

 

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

当サイトのトップページの前半では、
私が運用しているshopifyサイトURLを公開しています。
ぜひ、当ページと共にご覧ください!

 

 

【HTML編集】ちょこっと修正!基本の型を知ろう

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

 

YouTubeの埋め込みコードを使用してHTMLに追加します。

 

注意 YouTubeの埋め込みコードは、動画URLではなく「<iframe〜」から始まるコードです。このコードをコピペしていきます。

 

YouTubeの埋め込みコードをコピー

「埋め込む」をクリック。

YouTubeの埋め込みコードをコピー

YouTubeの埋め込みコードをコピー

「コピー」をクリック。

 

ただ、YouTubeから直接埋め込みコードを貼りつけるだけではレスポンシブ対応になっていません。

動画を挿入

※画像の上段:レスポンシブ対応した動画
※画像の下段:非レスポンシブ動画。切れてしまう!

 

↑画像にあるように、貼りつけるだけではスマホで見ると全画面に表示できないので修正が必要となります。

 

1.直接入力する方法

エディタの切替えボタン

HTML直接入力画面上で
埋め込みコードをコピペし、 <div> で囲み、HTMLに追加しましょう!

 

HTMLに

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

 

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

 

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

 

HTMLはこれで終了。

 

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

 

2.「動画を挿入する」ボタンを使う方法

エディタの切替えボタン

リッチテキストエディタ画面上で
埋め込みコードをコピペし、 <div> で囲み、HTMLに追加しましょう!

 

リッチテキストエディタとは、
ストアに表示される見た目でテキストの形式とスタイルを設定でき、装飾などの設定を初心者でも使いやすい画面です。

 

【ブログ記事や商品説明などのshopifyの管理画面】
*リッチテキストエディタ*↓

動画を挿入

「動画を挿入」ボタンをクリック。

YouTubeの埋め込みコードをコピー

動画を挿入

動画を挿入する欄に埋め込みコードを貼りつけます。

 

このままではレスポンシブ対応になっていないので
HTML直接入力画面に切り替えて
埋め込みコードを <div> で囲み、HTMLに追加しましょう!

 

以下は、「1.直接入力する方法」と同じ流れです。

 

HTMLに

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

 

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

 

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

 

HTMLはこれで終了。

 

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

 

【カスタマイズ編集】shopifyのCSSはどこにある?

 

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

 

「Layout」
「Templates」

 

下の方を見ていくと、

 

「Assets」が出てきます。

 

shopify|備考欄表示

 

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

 

(Assets)内に

 

「stylesheet.css.liquid」クリック!

 

この中にコードを入力しますよ!

 

私は追加するコードをCSSの一番下に追加しました。
一番最後に追加する方が、あとから見てわかりやすいと思います。

 

▼中央寄せ横幅指定のレシポンシブ用コード追加

YouTubeの埋め込み中央寄せ

 

  • PC:横幅を指定(中央に配置)
  • スマホ:レスポンシブ対応

動画の横幅を最大600px(各自サイズ変更OK)にして、それ以下をレスポンシブ対応にしたい

 

最大横幅を600px指定して、それ以下のブラウザ幅では比率を保持して縮小。
動画を中央寄せにして配置させる手順↓

 

【HTML】スマホ全画面だけどPC中央寄せの配置

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

class名は自由に変更可能。わかりやすい名前がおすすめです。

 

埋め込みコードをdivで囲い、さらにもう一度、divで囲います。

 

 

おすすめ度1【CSS】サクッと簡単に!コピペOK

 

/* 動画全体の横幅を指定するためのdiv */
.youtube-wrap {
max-width: 600px; /* 最大600pxの指定にした */
margin-left: auto;
margin-right: auto;
}

 

/* 動画を囲うdiv */
.youtube {
position: relative;
width:100%; /* 横幅は100%に */
height:0; /* 高さは0に(padding-topで高さを指定するため) */
padding-top: 56.25%; /* 高さを指定(16:9) */
}

 

/* YouTube埋め込み用のiframe */
.youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

↑↑
youtube」「youtube-wrap」は、div名。
自分で決めたdiv名に変更してください!

 

左右のマージンをauto指定することで中央に配置できる。
動画全体の横幅を指定するための
.youtube-wrapでpxでサイズを指定する以外にも%で指定もできます。
しかし、%にすると常に画面に対して%表示になるので注意しましょう。
(※スマホでも全画面にならず、%表示になってしまいます。50%にするとスマホ画面上でも50%の半分の小ささになってしまいます。)

 

 

▼横幅指定のレシポンシブ用コード追加

横幅指定

 

  • PC:横幅を指定(左寄りに配置)
  • スマホ:レスポンシブ対応

ただ、動画の横幅を指定するだけでは中央寄せの配置になりません
※中央寄せに配置したい場合は、中央寄せのパターンをご覧ください。

 

動画の横幅を最大600px(各自サイズ変更OK)にして、それ以下をレスポンシブ対応にしたい

 

最大横幅を600px指定して、それ以下のブラウザ幅では比率を保持して縮小。
動画の横幅が指定したサイズより小さくなった場合は、動画は左側に配置されます。

 

中央寄せにこだわらない場合は以下の流れです。
動画を左寄せにして配置させる手順↓

 

【HTML】スマホ全画面だけどPC左寄り

※おすすめ1の「中央寄せ」パターンとHTMLは同じ内容※
(CSSのみ違います)

 

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

class名は自由に変更可能。わかりやすい名前がおすすめです。

 

埋め込みコードをdivで囲い、さらにもう一度、divで囲います。

 

おすすめ度2【CSS】サクッと簡単に!コピペOK

 

/* 動画全体の横幅を指定するためのdiv */
.youtube-wrap {
max-width: 600px; /* 最大600pxの指定にした */
}

 

/* 動画を囲うdiv */
.youtube {
position: relative;
width:100%; /* 横幅は100%に */
height:0; /* 高さは0に(padding-topで高さを指定するため) */
padding-top: 56.25%; /* 高さを指定(16:9) */
}

 

/* YouTube埋め込み用のiframe */
.youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

↑↑
youtube」「youtube-wrap」は、div名。
自分で決めたdiv名に変更してください!

 

左右のマージンをauto指定を削除しています。
中央寄せパターン同様、pxでサイズ指定の他に%指定も可能です。
%にすると常に画面に対して%表示になるので注意しましょう。

 

 

▼横幅いっぱいのレシポンシブ用コード追加

 

\画面:1カラムバージョン/

YouTubeの埋め込み

 

サイドバーがある場合はそれほど、気にならないかもしれません。

 

しかし、サイドバーがない1カラムのページでは、パソコンで見たとき横幅いっぱいに設定すると画面いっぱいに表示されて大きすぎます。

 

  • PC:コンテンツ横幅いっぱいに指定(100%)
  • スマホ:レスポンシブ対応(常に100%)

サイドバーがあり、メインコンテンツの領域が小さくなるので100%全画面でやりたい

 

横幅を100%で指定しているので常に動画は幅いっぱいに広がるように表示されます。

 

【HTML】スマホもPCも全画面表示100%

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

class名は自由に変更可能。わかりやすい名前がおすすめです。
埋め込みコードをdivで囲うのは1回だけです。

 

おすすめ度3【CSS】サクッと簡単に!コピペOK

 

/* 動画を囲うdiv */
.youtube {
position: relative;
width:100%; /* 横幅は100%にしておく(ここを変えたい場合は実装コード2の方法を確認してください) */
height:0; /* 高さは0にしておく(padding-topで高さを指定するため) */
padding-top: 56.25%; /* 高さを指定(16:9) */
}

 

/* YouTube埋め込み用のiframe */
.youtube iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

↑↑
youtube」「youtube-wrap」は、div名。
自分で決めたdiv名に変更してください!

 

【小ワザ】知らなきゃ損!YouTube関連しない動画を省く方法

YouTubeからの動画であり、同一チャンネルから関連する動画のみを表示する場合に、この小ワザを使います。

裏ワザコード

埋め込みコード内からYouTube動画のURLを探します。

 

このURLのあとに「?rel=0」を追加入力します。

裏ワザコード

 

【参考URL例】
"https://www.youtube.com/embed/5o9jwYs7JaQ?rel=0"

 

これでサイト内でYouTube動画を再生した後、関連のない別の動画を非表示にすることができます。

 

※注意点※
動画をクリックして、サイトページからYouTubeページに飛んで再生をした場合は
関連しない別ページの非表示にはなりません。
あくまでも埋め込みされたページ内での再生に限ります

 

当サイトの動画を再生して、最後関連しない動画が表示されないか、確認してみよう!
5動画の比較デモページ

 

 

【おまけ】レシポンシブ対応のためのコードを確認しよう

 

レシポンシブ対応のコード Google推奨のレスポンシブな設定方法がこちら↓

 

<meta name="viewport" content="width=device-width,initial-scale=1.0">

 

meta viewportとは、レスポンシブ対応に欠かせないhtmlタグ
スマートフォンやタブレットなどのモバイル端末で表示させるために指定します。
HTMLファイルのheadタグ内に記述するGoogle推奨のhtmlタグとなります。

 

shopifyの画面からチェックする方法

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

 

shopifyのhead内にレスポンシブ設定がすでに記述されているのが確認できます。

 

レシポンシブ対応のコード

 

かんたんに調べる方法

【メタタグの確認方法】
実際のサイトを表示してソースを見るのが一番かんたんに早くチェックできます。

 

  1. サイトをブラウザで開く
  2. ブラウザ機能でページのソースを表示する(右クリック→「ソースの表示」または、Ctrl+Uを押す)
  3. Ctrl+Fを押して「viewport」で検索

 

最後に!確認を忘れずに

最後に、保存 を忘れずに!

 

【注意】
右上に保存ボタンがあるので意外にも忘れやすいんです。

 

したつもりが保存されていなくて、変更されていなかった!ということのないように
全画面表示になっているか、

  • パソコンから
  • スマホから

確認をしてレスポンシブ対応されていれば終了です!

 

YouTube動画を取り入れると
集客アップにつながり、
分かりやすく伝えることができます。

 

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

 

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

 

\動画も取り込もう/