【2025年】Shopify で YouTube 動画を埋め込んで表示する方法を徹底解説！おすすめアプリも紹介
目次
- はじめに
- Shopify ストアに YouTube 動画を埋め込んで表示することはできる？
- YouTube 動画を埋め込んで表示するメリット・デメリット
- Shopify で YouTube 動画を埋め込む 3 つの方法
- テーマコードを編集して YouTube 動画を表示するサンプルコード
- おすすめ Shopify アプリ「シンプル YouTube 埋め込み｜どこでも動画挿入」の紹介
- Shopify テーマセクションでの埋め込み方法
- 導入後の活用アイデア
- 動画埋め込みの運用・管理上の注意点
- まとめ
- 参考記事
はじめに
2025 年現在、EC 市場は国内外を問わずさらなる盛り上がりを見せています。中でも Shopify は、高度なカスタマイズ性や豊富なアプリエコシステムにより、多種多様なビジネス規模・業種のストアに柔軟に対応可能なプラットフォームとして注目を集めています。
そんな Shopify ストアを運営するにあたって、商品画像やテキストだけでなく YouTube 動画 を活用するケースが増えているのをご存知でしょうか。視覚的なインパクトや説明力の高い動画は、購入検討中のお客様に大きな安心感と理解度をもたらし、売上向上にも寄与します。
本記事では、「Shopify で YouTube 動画を埋め込んで表示する方法」 をテーマに、以下の内容を網羅的に解説していきます。
- Shopify ストアに YouTube 動画を埋め込んで表示することはできる？
- YouTube 動画をストアに埋め込むメリット・デメリット
- 実装方法 3 パターン
- Shopify テーマのセクションを使う
- Shopify テーマのコードを編集する
- Shopify アプリを利用する
- おすすめアプリ「シンプル YouTube 埋め込み｜どこでも動画挿入」 のご紹介
- コード編集で実装する場合のサンプルコード
- 導入後の活用アイデアや注意点
2025 年以降も競合が激しくなると予想される EC 市場で、動画コンテンツを活用することは、売上やブランド力の向上 に大きく貢献してくれるでしょう。ぜひ最後までお読みいただき、自社ストアの魅力を最大限にアピールできるようお役立てください。
今回は、以下の記事を参考にしています。
- Shopify でYouTube動画埋め込みを実現できるアプリ8 選を徹底解説
- ShopifyでYouTube動画を埋め込む方法について考察
- ShopifyでYouTube動画を表示する5つの方法を解説
- ShopifyストアにYouTube動画を簡単に埋め込めるアプリについて徹底解説｜ご利用ガイド
- ShopifyにYouTube動画を埋め込む方法を徹底解説（アプリ利用）
Shopify ストアに YouTube 動画を埋め込んで表示することはできる？
結論からいえば、Shopify ストアに YouTube 動画を埋め込んで表示することは可能 です。Shopify には HTML 要素を埋め込める仕組みがあり、YouTube が提供する「埋め込みコード」を利用するだけでも比較的簡単にストア上で動画を再生できます。
さらに、Shopify 公式が提供する テーマエディタ（セクション） を活用してブロックを追加したり、テーマコードを編集して自由度の高いレイアウトを実現したり、アプリを利用して管理しやすい形で導入したりと、3 パターン の方法を選ぶことができます。
YouTube 動画を埋め込んで表示するメリット・デメリット
メリット
1. 視覚的な訴求力が高まる
文章や画像だけでは伝えきれない 使用感・製品特性・ブランドの世界観 などを、動画で直感的に表現できます。実際に動いている様子や操作手順を見せることで、お客様の購買意欲を高めることが期待できます。
2. ストア滞在時間・回遊率の向上
動画はテキストや静止画よりも 閲覧時間が長くなる 傾向があります。ストア内で動画を視聴することで、結果的に滞在時間やほかのページへの回遊率がアップし、SEO（検索エンジン最適化）の観点でもプラスに働く場合があります。
3. 信頼感・専門性のアピール
商品やサービスに関する詳細な説明動画やデモ動画があると、顧客は「このストアは情報開示が丁寧で信頼できる」という印象を受けます。特に高単価商品や専門性の高い分野の商品において、動画コンテンツは 信頼感 を高める要素となり得ます。
4. スマホユーザーへの対応
YouTube 動画は、スマホやタブレットなど マルチデバイス で簡単に再生できるよう最適化されています。Shopify ストアで動画を活用すれば、モバイルユーザーにもわかりやすい商品情報を提供することが可能です。
デメリット
1. ページ読み込み速度への影響
YouTube の埋め込みプレーヤーを読み込むため、ページの表示速度がわずかに低下する可能性があります。表示速度はユーザー体験や SEO にも影響するため、画像や動画の圧縮・遅延読み込み などのパフォーマンス対策を検討しましょう。
2. 視認性やデザインへの影響
動画の埋め込み場所やサイズを誤ると、ストア全体のデザインやユーザー体験を損ねる恐れがあります。テーマのレイアウトや他のコンテンツとの兼ね合いを考慮して、埋め込む位置や表示サイズ を調整する必要があります。
3. 運用コスト
動画の撮影・編集・アップロードには、ある程度の労力やコストがかかります。特に定期的に新作商品を紹介する場合などは、動画制作の運用体制 を整える必要があり、適切なリソース配分やスケジュール管理が求められます。
4. 外部リンクへの依存
YouTube 動画を埋め込む形の場合、どうしても外部サービス（YouTube）のサーバーに依存します。YouTube 側で仕様変更や動画が削除・非公開となった場合、ストアに表示される動画が再生不可になるなど、突発的なトラブル が起こり得ます。
Shopify で YouTube 動画を埋め込む 3 つの方法
Shopify では、YouTube 動画をストアに埋め込むための方法が大きく分けて 3 つ 存在します。各方法の特徴やメリット・デメリットを把握し、自社ストアに合った実装方法を選びましょう。
1. テーマのセクションを使う
Shopify の管理画面から 「オンラインストア > テーマ > カスタマイズ」 にアクセスすると、テーマエディタでブロックやセクションを追加できます。最近の多くの公式テーマでは、画像 + テキストだけでなく、動画埋め込みに対応したセクション が用意されている場合があります。
-
メリット
- コーディング不要で、ドラッグ＆ドロップ操作のみで導入できる
- テーマエディタ上でリアルタイムにプレビューを確認できる
- テーマ更新時のコード衝突リスクが少ない
-
デメリット
- テーマによっては動画埋め込みのセクションが用意されていない場合がある
- 表示位置やデザインの細かいカスタマイズに制限がある
- セクションが複雑化すると、サイト全体の構成が分かりにくくなる
2. テーマのコードを編集する
テーマ内の HTML（Liquid）ファイルや、スニペット、セクションファイル を直接編集して、YouTube 動画用の iframe を埋め込む方法です。自由度が最も高い 反面、コードの管理や更新時の衝突などには注意が必要です。
-
メリット
- 細部までデザインを調整できる
- テーマ内の好きな場所にピンポイントで動画を表示できる
- 他のスクリプトや CSS と組み合わせて高度な演出が可能
-
デメリット
- コーディングスキルが必要
- テーマのアップデートを行うと、編集内容が上書きされるリスク
- コードエラーがあるとサイト全体のレイアウトが崩れる可能性
3. Shopify アプリを使う
Shopify アプリを利用すれば、ノーコード かつ管理画面から簡単に動画を埋め込む設定ができる場合があります。特定の機能に特化したアプリを活用することで、運用のしやすさ を大幅に向上させられるのが魅力です。
-
メリット
- コーディング不要、初心者でも導入しやすい
- GUI で複数動画や表示位置をまとめて管理可能
- テーマアップデートにも強く、アプリ開発者のサポートが受けられる
-
デメリット
- アプリによっては利用料金が発生する場合がある
- アプリが読み込むスクリプトが増えるため、ページ読み込み速度に若干の影響あり
- 他のアプリと競合する可能性があり、予期せぬ不具合が起こる場合がある
テーマコードを編集して YouTube 動画を表示するサンプルコード
ここでは、iframe 形式で YouTube 動画を埋め込むシンプルなコード例を紹介します。ご自身のテーマファイルや Liquid テンプレートに合わせて調整してください。
実装前の準備
-
バックアップを作成
Shopify 管理画面の「オンラインストア > テーマ」から「テーマを複製」して、いつでも元の状態に戻せるようにしておきましょう。 -
埋め込みたい YouTube 動画の URL を確認
YouTube の動画ページで「共有」メニューから「埋め込みコード」を取得します。もしくは動画の URL（https://www.youtube.com/watch?v=動画ID）を用意しておき、iframe 用に編集します。 -
挿入先ファイルを選定
テーマのレイアウトファイル（theme.liquid）やセクションファイル（section.liquidなど）にコードを追加します。フロントページや特定のテンプレートに限定したい場合は、該当ファイルを編集しましょう。
サンプルコード
<!-- ▼▼ YouTube 動画埋め込みのサンプルコード ▼▼ -->
<div class="youtube-embed-wrapper">
<iframe width="560" height="315"
src="https://www.youtube.com/embed/xxxxxxxxxx"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
<style>
.youtube-embed-wrapper {
width: 100%;
max-width: 800px; /* 必要に応じて調整 */
margin: 0 auto;
position: relative;
padding-bottom: 56.25%; /* 16:9 のアスペクト比に合わせた余白 */
height: 0;
}
.youtube-embed-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<!-- ▲▲ YouTube 動画埋め込みのサンプルコード ▲▲ -->
ポイント解説
padding-bottom: 56.25%は、16:9 アスペクト比を維持するためのテクニックです。position: absolute;を使うことで、iframe をラッパ要素内でアスペクト比を固定したまま拡大・縮小させることができます。allow="..."の設定で、動画再生に必要な機能（自動再生、暗号化されたメディアなど）を許可しています。src="https://www.youtube.com/embed/xxxxxxxxxx"の箇所に、該当する YouTube 動画 ID を挿入してください。
コード編集時の注意点
- テーマ更新時に上書きされるリスク
更新後に改めて埋め込みコードを追加するか、専用のスニペットを作ってインクルードするなど、管理方法を工夫しましょう。 - テーマによっては Liquid タグとの競合が発生する場合
他のカスタマイズやアプリが使う Liquid タグと競合しないよう、適切にコードを配置してください。 - モバイルレイアウトの確認
実際にスマホやタブレットで表示をテストし、レイアウト崩れがないかをチェックします。
おすすめ Shopify アプリ「シンプル YouTube 埋め込み｜どこでも動画挿入」の紹介
YouTube 動画を複数ページに表示したい、テーマコードを編集するのが不安、管理しやすい形で運用したい——そんな場合に便利なのが、アプリを使った方法です。ここでは日本語で使いやすいと評判の 「シンプル YouTube 埋め込み｜どこでも動画挿入」 をご紹介します。
アプリの特徴・機能
- コーディング不要
管理画面で動画 URL を設定するだけで、ストアの任意の位置に YouTube 動画を追加できます。 - 複数動画・複数ページへの対応
商品ページごとに異なる動画を表示したり、トップページ・ブログ記事など様々なページに配置することが可能です。 - レスポンシブ対応
スマホ・タブレット・PC で見やすいレイアウトを自動で調整。デバイスごとの画面サイズに合わせて動画が最適化されます。 - 日本語サポート
国産アプリならではの充実した日本語サポートにより、導入時の疑問やトラブルにも迅速に対応してもらえます。 - 軽量実装
ページの読み込みを極力妨げないよう配慮されており、スピードを重視するストアにも最適です。
インストール手順
-
Shopify アプリストア から「シンプル YouTube 埋め込み｜どこでも動画挿入」を検索、もしくは こちら から直接アクセスします。
-
アプリの詳細ページに移動し、「インストール」ボタンをクリックします。
-
Shopify 管理画面で権限確認の画面が出てきますので、問題なければそのまま進み、インストールを完了します。
-
アプリの管理画面が表示されれば、インストールは完了です。
「シンプル YouTube 埋め込み｜どこでも動画挿入」のカスタマイズ
アプリの使い方については、公式のご利用ガイドが詳しいので、以下を参考にしてください。
ここでは概要を簡単にご紹介します。
アプリブロックを追加する
アプリをカスタマイズするには、テーマにアプリブロックを追加する必要があります。以下の手順でアプリブロックを追加してください。
-
アプリの管理画面の「テーマに追加」でテーマにアプリブロックを追加してください。
-
TOP ページにアプリブロックが追加されます。問題なければ、変更を保存してください。（公開中のテーマの場合、保存すると実際のストアに反映されてしまうので注意してください。）
自動でのアプリブロック追加がうまくいかない場合や TOP ページ以外のページにアプリブロックを追加したい場合は、ご利用ガイドを参考に手動でアプリブロックを有効化してください。
アプリのカスタマイズ
-
YouTube 動画リンク（ID）の設定
YouTube 動画のリンクまたは ID を設定してください。YouTube 動画は 1 ブロックあたり最大 4 つまで設定することができます。4 つ以上の動画を一覧表示したい場合は、複数のアプリブロックを使用することで可能です。設定できる値は以下の通りです。https://www.youtube.com/から始まる URL（例：https://www.youtube.com/watch?v=wM-NT6hcw48）https://youtu.be/から始まる URL（例：https://youtu.be/wM-NT6hcw48）- 動画 ID（例：wM-NT6hcw48）
-
YouTube 動画の再生設定
自動再生やループ再生などの再生設定ができます。- 自動再生を有効化: 有効にすると、ページ読み込み時に動画が自動的に再生されます（ブラウザ仕様によりミュート状態となります）。
- ループ再生を有効化: 動画が終わったら再度再生を繰り返します。
- コントロールを表示する: 再生バーなどのコントロール UI を表示するかどうかを選択できます。
- 関連動画を表示する: 動画終了後に関連動画を表示するかどうかを選択できます。
- キーボード操作を無効化する: キーボードのショートカット（スペースキーで再生/一時停止など）を無効にするか設定できます。
-
レイアウトの設定
「カラム数（PC / スマホ」で動画のグリッド表示の列数を 1 ～ 4 カラムから選択可能です。PC 用とスマホ用で異なるカラム数を指定することができます。また、動画間の余白を設定することもできます。
-
余白の設定
アプリブロックの余白に関する設定ができます。
-
変更の保存
「保存」 ボタンをクリックして変更を反映してください。
カスタマイズのポイント
- 複数の動画を使い分けたい場合
商品ページ単位で異なる動画を表示する、あるいは複数ブロックを追加して複数の動画を並べるといったレイアウトも簡単に実現できます。 - ブランドカラーとの統一感
アプリ設定の背景色やフレームデザインを調整し、ストア全体のデザインと統一感を持たせることで、より洗練された印象になります。 - ページ速度への配慮
アプリ設定で動画の遅延読み込み（Lazy Load）が可能な場合は有効にすると、ページ表示が遅くなるのを緩和できます。
Shopify テーマセクションでの埋め込み方法
冒頭で触れた通り、多くの公式テーマでは 「ビデオセクション」 や 「カスタムコンテンツセクション」 などが用意されている場合があります。ここでは一般的な手順の例を紹介します。
-
「オンラインストア > テーマ > カスタマイズ」 へアクセス
該当テーマのカスタマイズ画面が開きます。
-
「セクションを追加」または「ブロックを追加」 をクリック
追加できるセクション・ブロックの一覧が表示されるので、タイトルや説明に「動画」や「Video」といった文言が含まれるものを探して追加します。
-
プレビューでレイアウトやデザインを確認
必要に応じてサイズや位置、テキスト要素とのバランスを微調整し、「保存」して完了です。
ただし、テーマごとに対応状況や編集画面が異なる ため、一律の手順でできるわけではありません。公式ドキュメントやテーマ開発者のガイドを参照することをおすすめします。
導入後の活用アイデア
YouTube 動画を Shopify ストアに埋め込むだけでなく、さらに EC サイトとのシナジー を高めるためのアイデアをいくつかご紹介します。
1. 商品ページでの使用方法
- 商品レビュー動画
実際の使用感やレビューを動画化して載せると、顧客が安心して購入を検討しやすくなります。ユーザーから寄せられた動画レビューをピックアップして掲載するのも有効です。 - 使い方ガイド動画
組み立て方や調理方法など、実演することでわかりやすい商品は動画と相性抜群です。導入や使用手順を丁寧に解説すれば、クレーム減少やサポート工数の削減につながる場合もあります。
2. ブログ記事での使用方法
- ハウツー記事のビジュアル補強
ノウハウ系のブログ記事で文章だけでは説明しづらいポイントを動画で説明することで、読者の理解度・満足度を高められます。 - ブランドストーリーや制作背景動画
商品開発の裏側やブランドコンセプトを動画で伝えると、読者の共感を得やすくなり、ブランドファンを育成する効果が期待できます。
3. トップページやランディングページでの使用方法
- コンセプトムービー
数十秒程度の短い動画でブランドイメージを強烈に訴求できます。静止画やテキストだけでは表現しきれない世界観をアピールしましょう。 - キャンペーン告知動画
セールや新商品発表などのタイミングで動画をトップページに配置すると、訪問者の目を引きやすく、イベントの認知度向上に役立ちます。
動画埋め込みの運用・管理上の注意点
1. 動画コンテンツの更新頻度
YouTube 動画を活用するのであれば、定期的な更新 が理想的です。旬の情報や新商品の紹介動画を随時アップすると、リピーターが増え、チャンネル登録者数の拡大にもつながります。
2. 動画のクオリティ・尺
長すぎる動画は途中離脱が多くなる一方、あまりに短いと十分な情報が伝わらない恐れもあります。商品紹介やハウツー系の動画の場合、2〜3 分 程度を目安に制作すると視聴されやすい傾向があります。
3. ページ速度とのバランス
動画をたくさん埋め込み過ぎると、ページ表示が重くなる原因となります。複数の動画を設置する場合は、サムネイルのみ表示し、クリック後に再生プレーヤーが読み込まれる 方式（Lazy Load）を検討するなど、パフォーマンスに配慮した設計が必要です。
4. 著作権・使用許諾
YouTube では、著作権保護されたコンテンツを無断で使用している動画も存在します。自社のストアに埋め込む前に、権利関係 に問題ないか十分に確認しましょう。
まとめ
「Shopify で YouTube 動画を埋め込んで表示する方法」 は、テーマエディタのセクション機能・テーマコードの直接編集・Shopify アプリの活用という 3 つの主要な手段があります。各方法のメリット・デメリットを把握しながら、自社ストアのデザインや運用リソースに合った形で導入してください。
- セクションで埋め込む: コーディング不要、手軽に試せる
- コード編集: カスタマイズ自由度が高いが、アップデート管理が必要
- アプリを利用: ノーコードで複数動画管理も簡単、ページ速度や競合に注意
とりわけ、コーディングのハードルを下げたい場合や、複数の動画を一元管理したい場合には、「シンプル YouTube 埋め込み｜どこでも動画挿入」 のようなアプリを活用するのがおすすめです。
商品レビューや使い方解説、ブランドイメージ動画など、YouTube は EC サイトに 強力なセールス効果 と ブランディング効果 をもたらします。運用コストやページ表示速度にも気を配りつつ、上手に動画コンテンツを活用して、2025 年以降の激戦区を勝ち抜く魅力的な Shopify ストアを構築していきましょう。
最後まで読んでいただきありがとうございました。
参考記事
今回は、以下の記事を参考にしています。
.png?w=400){kind=icon}
