Shopifyストアに動画を簡単に埋め込めるアプリについて徹底解説｜ご利用ガイド

株式会社UnReact

2025/03/26

はじめに

今回の記事は、Shopify アプリである「シンプル動画埋め込み｜お手軽どこでも動画挿入」の解説記事です。

Shopify とは、ざっくり説明すると EC サイトを簡単に構築できるプラットフォームであり、Shopify アプリとはその機能を拡張するものです。WordPress におけるプラグインのようなイメージを持っていただければわかりやすいかと思います。

「シンプル動画埋め込み｜お手軽どこでも動画挿入」は、その名の通りストア内のあらゆるページに動画を簡単に埋め込むためのアプリです。

といった特徴により、初心者の方でも手軽に動画を使ったブランディングやコンバージョン向上を図ることができます。

ご興味のある方は、以下のインストール URL からぜひチェックしてみてください。

この記事の内容は、以下の記事を参考にしています。

本アプリを使うと、以下のようなことが可能になります。

シンプル動画埋め込み｜お手軽どこでも動画挿入

商品ページやブログ記事、トップページなど、ストア内のどこにでも自由に動画を埋め込むことができます。
あらゆるページに動画を簡単に挿入できる！

最大 4 つの動画をグリッド状で同時に表示できます。複数ブロックを追加すれば、4 つ以上の動画も一覧表示が可能です。
動画をグリッド表示できる！

自動再生やループ再生、コントロールの表示・非表示、列数や余白などのデザイン調整をノーコードで設定できます。
ノーコードでカスタマイズできる！

アプリをインストールしてテーマに追加するだけで、ストア上に動画ブロックを即座に設置できます。複雑なコードの編集は不要です。
1クリックでテーマに追加できる！

インストールが完了したら、アプリブロックをテーマに追加し、ストア上に動画を表示できるように設定します。

自動追加がうまくいかない場合や、特定のセクションにブロックを追加したい場合は、手動でブロックを配置することができます。

テーマにブロックを追加後、「シンプル動画埋め込み｜お手軽どこでも動画挿入」の各種設定が行えます。
設定画面の項目は以下のようになっています。

アプリの設定項目

動画 1 / 2 / 3 / 4
それぞれ埋め込みたい動画ファイルを指定できます。最大 4 つの動画を一度に設定でき、複数を設定するとグリッドレイアウトで表示されます。
自動再生を有効化する
ページ読み込み時に動画が自動的に再生されます。ブラウザの仕様上、音声はミュート状態となります。
ループ再生を有効化する
動画が終了したら再度自動的に再生を行います。
コントロールを表示する
再生バーや音量調整、全画面表示ボタンなどを表示・非表示で切り替えます。
ミュートにする
手動でミュートをオン・オフします。自動再生と併用する場合、基本的には音声がミュートされますので注意してください。

アスペクト比を動画に合わせる
この項目を有効化すると、動画本来の比率（アスペクト比）を保ったまま表示されます。
※オンにすると、次項目の「アスペクト比」スライダー設定は無効化されます。
アスペクト比
「アスペクト比を動画に合わせる」がオフのときに有効となり、たとえば「幅を 100% としたときの高さを何 % にするか」を設定します。たとえば 55% にすると、横幅に対して高さが 55% のスペースで表示されます。
カラム数 (PC / スマホ)
最大 4 カラムまで指定可能です。PC とスマホで異なるカラム数が設定できるので、デバイスに応じたレイアウトを実現できます。
動画間の余白 (PC / スマホ)
各動画同士の間隔をピクセル単位で調整できます。たとえば 24px と指定すると、隣り合う動画の間に 24px のスペースが生じます。

左右の余白 (PC / スマホ)
ブロック全体を左右からどれくらいの余白で囲むかを設定します。0px なら画面幅いっぱいに表示でき、数値を大きくすると左右のスペースが広がります。
上部の余白 (PC / スマホ)
ブロックの上側に余白を設定します。
下部の余白 (PC / スマホ)
ブロックの下側に余白を設定します。