動画コンテンツはECサイトにおいて商品の魅力を伝える重要なコンテンツです。動画コンテンツの効果によって「集客力が上がる」「コンバージョン数が増える」などとも言われています。
楽天市場では、商品編集ページで埋め込む動画を設定することができます。しかしこの方法の場合、採用しているデザインやテンプレートパターンによっては、PC表示のときに動画が思うように表示されないかもしれません。
そこで今回は、自由なレイアウトでPC用商品ページに動画コンテンツを埋め込むために、「PC用商品説明文」や「PC用販売説明文」を使用する方法をご紹介します。
※この記事の内容は、R-Cabinetと楽天GOLDの両方を利用できることを前提にしています。
動画を埋め込むまでの手順
R-Cabinetで動画をアップロードすると「貼り付け用HTMLソース」（HTMLのscript要素）が発行されます。しかし、「PC用商品説明文」や「PC用販売説明文」ではscript要素の使用が許可されていないので、そのままでは使用できません。
そこで、script要素の使用が許可されている楽天GOLDサーバを経由することで、間接的に「PC用商品説明文」や「PC用販売説明文」に動画を埋め込みます。
商品ページに動画を埋め込むまでの作業手順は、
- R-Cabinetに動画をアップロードする
- 楽天GOLDのサーバに、(1)でアップロードした動画を読み込むHTMLファイルを作成する
- 商品編集ページの説明文入力欄に、(2)で作成したHTMLファイルを読み込むためのiframe要素を追加する
以上の3ステップです。
※「スマートフォン用商品説明文」では後述するHTMLのiframe要素の使用が許可されていないので、この記事の方法は使用できません。
※今回ご紹介する内容は今後の楽天市場の仕様変更により使用できなくなる可能性があります。また、ご使用に際しては事前に楽天市場の仕様を確認するなどして各自の責任においてご使用ください。
動画のアップロード
動画のアップロード・管理は、RMSの店舗設定メニューから行います。
動画をアップロードすると、「貼り付け用HTMLソース」が発行されます。
「貼り付け用HTMLソース」の「サイズ」は縦横比（4:3, 16:9）と大きさ(S, M, L)の組み合わせである6種類の中から選択できます。サイズを選択したら「貼り付け用HTMLソース」をコピーして控えておきます。
<!-- S: 320x240を選択した場合のHTMLソース サンプル -->
<script src="//stream.cms.rakuten.co.jp/gate/play/?w=320&h=286&mid=XXXXX&vid=XXXXX" type="text/javascript"></script>もし上記の組み合わせ6種類以外のサイズで表示したい場合は「貼り付け用HTMLソース」のw=320（横幅）やh=286（高さ）の数値を任意の数値に編集してください。
※「貼り付け用HTMLソース」のh=XXXの数値は「サイズ」のプルダウンで指定したものより余白分（video要素の再生ボタンなど）の46px大きい数値になっています。サイズの数値を編集する場合は最終的な動画の高さに46を足してください。
動画読み込み用のHTMLファイルを作成
楽天GOLDサーバの任意の場所に以下のようなHTMLファイルを作成します。body要素の中身は先ほど控えた「貼り付け用HTMLソース」だけです。style要素内のCSSは、この後商品ページに追加するiframe要素と動画の間に余白ができないようにするための指定です。
ここではmovie.htmlという名前で楽天GOLDサーバにアップロードしておきます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie</title>
<style>body { margin: 0; }</style>
</head>
<body>
<!-- 貼り付け用HTMLソース -->
<script src="//stream.cms.rakuten.co.jp/gate/play/?w=320&h=286&mid=XXXXX&vid=XXXXX" type="text/javascript"></script>
</body>
</html>説明文にiframeを追加
動画を埋め込みたい商品の編集ページで、「PC用商品説明文」もしくは「PC用販売説明文」の入力欄に、先ほど作成したHTMLファイルを読み込むiframe要素を追加します。
<iframe src="https://www.rakuten.ne.jp/gold/shopname/movie.html" frameborder="0" width="320" height="286"></iframe>iframe要素のwidth属性とheight属性の値はそれぞれ「貼り付け用HTMLソース」のwとhと同じ値を指定します。埋め込む動画のサイズによっては、この指定をしないとiframe要素の中で動画が切れてしまってスクロールバーが出てしまうかもしれません。
レイアウトを調整する場合は、iframe要素に対してスタイルを当てて調整します。
<!-- 埋め込む動画を親要素に対して中央寄せする場合 -->
<iframe style="display: block;margin: 0 auto;" src="https://www.rakuten.ne.jp/gold/shopname/movie.html" frameborder="0" width="320" height="286"></iframe>iframe要素を追加した後に商品情報を更新したら、動画を埋め込む作業は終了です。
おわりに
楽天市場では基本的に外部サイトへのリンクが禁止されているのですが、YouTube動画は申請することで使用が許可されるものもあるみたいです。
埋め込む動画の数についてですが、商品編集ページの「動画（HTMLソース）」からの登録では動画は1つしか埋め込めませんが、今回ご紹介した方法では特に制限なく商品ページに動画を埋め込むことができます。また、ヘッダー・フッター・レフトナビでの設定でもiframe要素は許可されているので、同じように動画を埋め込むことができます。
ただし、動画の埋め込み過ぎには注意が必要です。一般的に動画の方が画像よりファイルサイズが大きいので、ページの読み込み速度に悪影響を与える可能性があります。楽天市場では動画データをいくつかに分割して配信しているので、巨大な動画ファイルが一度に読み込まれるわけではありませんが、通信環境によっては多少なりともページの読み込みに影響してくると思われます。
以上のことから、PC用の商品ページに複数の動画を埋め込む際は、念のために公開前と公開後にページの表示速度を確認しておくことをおススメします。あまりにもページの表示速度が遅くなるようでしたら、動画を含めた商品ページのコンテンツを見直した方が良いかもしれません。
