ECサイトにおける動画コンテンツの活用は、消費者の購買意欲の向上に繋げるきっかけとなります。実店舗のように商品を見たり触れたりすることができない代わりに、動画コンテンツを見ることで動きや音など静止画では取得できない情報を知り得ることに繋がります。また、商品の実際の使用感を確認できたり、設置や組み立ての方法を説明するためにも有効です。
ECにおける動画コンテンツの公開は販促プロモーションの一環として、今に始まったわけでもなく以前より注目されておりましたが、最近のYoutube等の動画共有サービスが広く認知されたことで、動画コンテンツの重要性を再認識されているEC事業者様も多いかと思います。そこで本記事では、作成した動画コンテンツをECサイト上で設置する方法をまとめました。

方法１：videoタグを使ってHTMLで動画コンテンツを埋め込む

まずはFTP等のファイルのアップロード機能を利用し、作成した動画コンテンツをサーバーにアップロードします。動画のアップロードが完了したら、下記サンプルのようなvideoタグを使い、表示させたい位置にコードを設置します。

▼サンプル

<video src="test.mp4" width="500" height="300" poster="thumb.jpg" controls autoplay muted loop />

サンプルのソースコードに含めております各属性の詳細は以下となります。必要に応じて設定頂けます。

方法２：Youtubeなどの動画共有サービスで公開した動画を設置する

Youtubeなどの動画投稿共有サイトを利用する場合、作成した動画コンテンツを投稿サイトにアップロード後、生成されたソースコードをECサイト上に埋め込みます。Youtubeの場合、こちらのヘルプページを参考にし、ソースコードを取得します。

▼サンプル

<iframe width="560" height="315" src="https://www.youtube.com/xxxxx" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Youtube 動画コンテンツの埋め込みをCSSでレスポンシブ対応する方法

Youtubeから取得した上記のソースコードをコピー＆ペーストするだけでも動画コンテンツの設置は可能です。しかしこのままではデバイスサイズによっては、動画コンテンツが全画面で表示されない場合があります。様々なデバイスでの視聴時においても最適化表示されるよう、CSSを使用してレスポンシブ対応する方法をご紹介致します。

Youtubeから取得したソースコードを任意のclass名を作成してdivタグで括ります。※今回の例の場合、youtubeというclass名にしております。

<div class="youtube">
<iframe width="560" height="315" src="https://www.youtube.com/xxxxx" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Youtubeから取得したソースコードはiframe形式となっており、widthやheightの値が固定されております。レスポンシブ対応をする為にCSSでiframe要素のwidthとheightを100%にして、位置をposition:absoluteにして調整していきます。

.youtube{
  position:relative;
  width:100%;
　padding-top:56.25%;
}

.youtube iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}

以上で完成です。余白などの調整が必要な場合は、任意で追加してください。

ECサイト上にてYoutube動画コンテンツを公開している事例

北海道の名菓子・柳月様の商品ページにて、大人気商品「あんバタサン」CMのネット限定動画をアップロードされております。

カーテン通販のくれない様では、静止画で説明するよりも分かりやすいカーテンの採寸方法を動画で公開されております。

まとめ

いかがでしたでしょうか。今回、ECサイトに動画コンテンツを設置する方法として、２つの方法をご紹介しましたが、お薦めは方法２のYouTubeなどの動画共有サイトの利用です。

方法１と方法２の大きな違いは、動画を投稿する場所にあります。動画コンテンツを自社サーバーにアップロードする場合、容量を気にする必要があったり、サーバーに負荷がかかると読み込み速度に影響が出ることも考えられます。動画共有サイトを利用する場合は、動画自体を投稿サイト側にアップロードする為、例えばYoutubeの場合、現時点ではアップロードできる１つのファイルの最大サイズ容量が定められておりますが、動画の本数に関する制約は見当たりません（Youtubeヘルプを参照）。つまり、容量に関してさほど気にせず投稿することが出来ます。それだけでなく、多くの人が閲覧するプラットフォームを利用することで、良い動画コンテンツはバズらせたり、動画共有サイト側からの流入も期待できます。

せっかく作成した動画コンテンツですから、ストレスを感じさせない環境で少しでも多くの人の目に留まるような方法で公開し、ECの繁栄に繋げていきましょう。