ShopifyでYouTube動画を埋め込む方法について考察
はじめに
今回は、Shopify ストアに YouTube 動画を埋め込む方法について考察しました。
コードを直接編集して埋め込む方法や、アプリを活用して埋め込む方法について考察していきます。
それでは、頑張っていきましょう。
今回は、以下の記事を参考にしています。
- Shopify でYouTube動画埋め込みを実現できるアプリ8 選を徹底解説
- ShopifyでYouTube動画を表示する5つの方法を解説
- 【2025年】Shopify で YouTube 動画を埋め込んで表示する方法を徹底解説！おすすめアプリも紹介
- ShopifyストアにYouTube動画を簡単に埋め込めるアプリについて徹底解説｜ご利用ガイド
- ShopifyにYouTube動画を埋め込む方法を徹底解説（アプリ利用）
Shopify で YouTube 動画を埋め込む定義
YouTube 動画を埋め込むとは、YouTube 上の動画プレイヤーを自身の Shopify ストア内に表示させることを指します。ストアの商品説明ページやブログ記事ページ、トップページなど、あらゆるページに YouTube 動画を配置できます。
EC サイトでは、テキストや画像だけでは伝わりにくい情報を、動画で補足・訴求できるようになるため、ブランディングや購入促進において大きな効果が期待できます。
Shopify で YouTube 動画を埋め込むメリット
まずは、Shopify ストアに YouTube 動画を埋め込むメリットについて解説していきます。せっかく YouTube 動画を使うので、どのような利点があるかを考えてみましょう。
1. ブランドイメージの向上
動画を使用することで、ブランドの世界観やコンセプトを直感的に伝えることができます。文字や画像だけでは伝わりにくいブランドストーリーや商品特性を動画で表現することで、ブランドの魅力をより強くアピールすることが可能です。
2. 購入意欲の向上
商品紹介動画を埋め込むことで、お客様に商品の使い方や特徴を視覚的に理解してもらいやすくなります。写真だけではわからなかった質感やサイズ感なども動画ならリアルに伝わり、購入前の不安を解消し、購入意欲を高めることができます。
3. 滞在時間とエンゲージメントの向上
テキストや画像に比べて動画は情報量が豊富なため、視聴者のサイト滞在時間やエンゲージメントが向上しやすいです。ユーザーがサイト内に長く留まることで、バウンス率の低減や SEO 上の好影響が期待できます。
4. 多言語対応がしやすい
YouTube 動画に字幕を付与すれば、海外ユーザーにも容易に情報を伝えることができます。Shopify ストアで多言語展開を検討する際にも、テキスト翻訳と合わせて動画を使うことで、よりグローバルなユーザーにアプローチできるようになります。
5. SNS との親和性
YouTube は世界的に利用されている動画プラットフォームであり、SNS へのシェアも容易です。動画をストアに埋め込みつつ、同時に YouTube チャンネルへのアクセスや SNS での拡散も期待できるため、マルチチャネルでのプロモーション効果が高まります。
Shopify で YouTube 動画を埋め込むデメリット
それでは次に、YouTube 動画を埋め込むデメリットについて考察していきます。
1. ページの表示速度への影響
動画プレイヤーを読み込む分、ページの表示速度が遅くなる場合があります。特に高画質動画を複数埋め込むと、表示速度が低下し、ユーザーの離脱率が上がる可能性があります。ページ速度が重要視される昨今では、この点を考慮する必要があります。
2. レイアウト崩れのリスク
手動で iframe を埋め込む場合、テーマやデバイスサイズによってはレイアウトが崩れることがあります。モバイルファーストのデザインを意識していないと、動画プレイヤーが画面からはみ出してしまうなどの不具合が起きる可能性があります。
3. 動画コンテンツの作成コスト
高品質な動画を作成するには、撮影や編集などの手間とコストがかかります。簡単なデモ動画であっても、継続して運用する場合はリソースが必要になるので、運用体制を整えておくことが大切です。
4. 他プラットフォーム依存
YouTube は外部プラットフォームなので、YouTube 側の仕様変更や不具合の影響を受ける可能性があります。動画が削除されたり、埋め込み機能に制限がかかったりすると、ストア側で対策が必要になります。
Shopify で YouTube 動画を埋め込む方法
ここでは、Shopify テーマに直接コードを追加して YouTube 動画を埋め込む簡単な例を紹介します。
YouTube の埋め込みコードを取得する
YouTube 動画ページの「共有」ボタンを押して「埋め込む」オプションを選択すると、iframe タグを含んだ埋め込み用 HTML コードをコピーできます。
<iframe width="560" height="315" src="https://www.youtube.com/embed/XXXXXXXXXXX" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Shopify テーマのコードに貼り付ける
管理画面の「オンラインストア > テーマ > テーマを編集」から、追加したいページの Liquid テンプレートやセクションに先ほどの iframe タグを貼り付けます。例として、product.liquid や section-template.liquid などに埋め込むことが可能です。
<div class="youtube-embed-wrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/XXXXXXXXXXX" frameborder="0" allowfullscreen></iframe>
</div>
レスポンシブ対応
動画が画面サイズに合わせて縮小・拡大されるように、以下のような CSS を追記することも検討しましょう。
.youtube-embed-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
overflow: hidden;
}
.youtube-embed-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Liquid を用いたテンプレートコード例
また、Liquid を用いたテンプレートコードの例を解説します。
以下は product.liquid などに記述して、メタフィールドやタグから取得した YouTube ID を埋め込む例です。
{% if product.metafields.custom.youtube_id != blank %}
{% assign youtube_id = product.metafields.custom.youtube_id %}
{% elsif product.tags contains 'youtube:' %}
{% for tag in product.tags %}
{% if tag contains 'youtube:' %}
{% assign youtube_id = tag | remove: 'youtube:' | strip %}
{% endif %}
{% endfor %}
{% endif %}
{% if youtube_id != blank %}
<div class="youtube-embed-wrapper">
<iframe
src="https://www.youtube.com/embed/{{ youtube_id }}"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen>
</iframe>
</div>
{% endif %}
コード解説
-
metafields.custom.youtube_idが空でない場合（例: 管理画面で動画 ID をメタフィールドに入力しておく）には、その値をyoutube_idに割り当てます。 - もしメタフィールドが空なら、商品タグの中に
youtube:という文字列が含まれるタグを探して、それをyoutube_idに設定します。 -
youtube_idが存在する場合のみ、iframe タグを生成し、動画を表示します。 - CSS は先ほどのレスポンシブ対応と同じように設定します。
このように Liquid を活用すると、ストア管理画面で入力した動画 ID を自動的にプレイヤーに埋め込み表示する仕組みが作れます。複数商品で動画が違う場合や、タグを用いて簡易的に管理したい場合などに非常に有効です。
Shopify アプリを用いて YouTube 動画を埋め込む方法
Shopify アプリを使うと、テーマへのコード編集を最小限に抑えて、ノーコードで YouTube 動画を挿入できます。初心者やデザイナーの方が導入・更新作業を行うときにも便利です。
以上で、手動による YouTube 動画埋め込みが可能になります。ただし、複数ページや複数動画の管理を行う場合、コード修正や設置ミスが増える可能性があります。
次に、Shopify アプリを用いた実装方法について考察していきます。
Shopify アプリを用いて YouTube 動画を埋め込む方法
Shopify アプリを使うと、ノーコードでストアのあらゆるページに YouTube 動画を埋め込むことができます。テーマコードを直接編集しなくてよいため、デザイナーやノンエンジニアの方でも簡単に動画を追加し、デザインをカスタマイズできるのが大きな利点です。
ここで紹介するのがシンプル YouTube 埋め込み｜どこでも動画挿入というアプリです。
以下のリンクから、アプリをインストールできます。
また、以下の公式のご利用ガイドを参考にしています。
シンプル YouTube 埋め込み｜どこでも動画挿入 の機能について
「シンプル YouTube 埋め込み｜どこでも動画挿入」は、株式会社UnReact が開発した Shopify アプリです。月額 4.99 ドルで、以下のような機能が利用できます。
-
ノーコードで YouTube 動画を埋め込める
Shopify の管理画面上から、埋め込みたい YouTube 動画の URL を入力するだけで、ストアのあらゆるページに動画を追加できます。コード編集が不要なので、初心者の方も安心して利用できます。 -
あらゆるページへの挿入が可能
商品ページ、コレクションページ、ブログ記事ページなど、どのようなページでも設定画面から動画を配置できます。例えば「商品詳細ページに 3 つの動画を並べたい」「トップページに動画を 1 つだけ配置したい」など、自由度の高いレイアウトが可能です。 -
グリッド表示や自動再生・ループ再生の設定が簡単
アプリでは、最大 4 つの YouTube 動画をグリッド（一覧）表示できます。複数のブロックを組み合わせれば 4 つ以上の動画を一覧表示することも可能です。また、自動再生やループ再生、各動画プレイヤーの余白設定なども、すべてノーコードで設定できます。 -
インストール後の操作が簡単で最短 30 秒
インストール後の初期設定はボタン操作で完了します。Dawn テーマをはじめ、Shopify 標準テーマとの相性も良いため、デザイン崩れが起きにくい点も魅力です。 -
日本語と英語の 2 言語対応
管理画面は日本語と英語に対応しているため、英語圏のスタッフがいる場合でもスムーズに操作できます。
このように「シンプル YouTube 埋め込み｜どこでも動画挿入」を活用することで、動画コンテンツを通じたブランド訴求力向上や商品紹介の強化が期待できます。ノンエンジニアでも導入しやすく、短時間で実装できる点が非常に大きなメリットと言えるでしょう。
ここからは、Shopify のアプリリストを用いてシンプル YouTube 埋め込み｜どこでも動画挿入の概要について解説します。
シンプル YouTube 埋め込み｜どこでも動画挿入の概要
ここからは、シンプル YouTube 埋め込み｜どこでも動画挿入の概要です。
シンプル YouTube 埋め込み｜どこでも動画挿入は、Shopify で YouTube 動画を埋め込むことができるアプリです。
あらゆるページに YouTube 動画を簡単に挿入できます。
こちらのアプリを用いれば、YouTube動画をグリッドで表示できます。
また、ノーコードで様々な項目をカスタマイズできます。
また、1 クリックでテーマに追加できます。
このように、非常にシンプルな UI で、Shopify ストアに YouTube 動画を埋め込むことができます。
以下のアプリリストからアプリをインストールすることができます。
最後に
今回は、YouTube 動画を Shopify ストアに埋め込む方法として、「コードで直接埋め込む」方法と、「Shopify アプリを利用する」方法の二つを解説しました。動画は、テキストや画像だけでは表現しきれない魅力を伝えられる強力な手段です。
手動で実装する場合はある程度の HTML/CSS の知識が必要ですが、「シンプル YouTube 埋め込み｜どこでも動画挿入」のようなアプリを使えば、ノーコードで簡単にストアへ動画を配置できます。ぜひ活用してみてください。
お疲れさまでした。
参考記事
今回は、以下の情報を参考に作成しました。
今回は、以下の記事を参考にしています。
Discussion