ホームページ制作・集客スクール

楽天サイトの背景にYoutubeの動画を配置する方法|ホームページ更新代行サービスブログ

img161210

こんにちわ、ほっそーです。

最近、楽天サイトのメインビジュアルにYoutubeの動画を流したいという要望がありまして、いろいろ調べて実現できたので、忘れないうちに記事にします。

配置する際に必要なもの

Youtubeが提供する「IFrame Player API」と「楽天Gold」を使用する必要があります。

IFrame Player APIの公式ドキュメントはこちら:IFrame Player API

楽天Goldは、楽天が各店舗に提供している、専用のサーバースペースを使って好きなファイルをアップロードして使用できるサービスです。

なぜIFrame Player APIと楽天Goldを使用するのか

なぜIFrame Player API?

一般的なYoutubeの埋め込みの場合、単に埋め込むのみであれば簡単に行なえますが、自動再生にしたり、音声のデフォルト値を設定したりするなど、細やかなコントロールができません。また、スタイルの自由度もほとんどありません。

IFrame Player APIを使用すれば、そのあたりのコントロールが簡単に行えます。

なぜ楽天Gold?

RMS(楽天が提供する店舗用のCMS)は、楽天以外の外部サイトのURLが利用できず、またJavaScriptを記述することが許可されていません。IFrame Player APIは外部サイトを参照する必要があり、かつ設定はjsで記述するため、RMSでは動かすことができません。

楽天Goldを使用すれば、外部サイトを参照でき、かつjsの記述も許可されているため、IFrame Player APIを動かすことが可能です。

実装手順

1. IFrame Player APIで動画を表示する

まず、IFrame Player APIを使って動画を表示します。

jsのソースコードは下記の記事を参考にさせていただきました。
jQuetyを使わずにYoutubeの動画を背景に設置する。 | montblan9.net

下記、js、html、cssのソースです。

CSSの解説

#youtube iframe
動画の表示領域の大きさを設定しています。IFrame Player APIを使用すると、動画はiframeで出力されます。

.movie
動画サイズと表示位置を調整しています。topにマイナスの値を指定して、動画の中央が表示領域の真ん中に来るように調整しています。

.box
動画表示領域の親要素です。overflow:hiddenではみ出る部分を隠しています。また、z-indexの値を調整して動画の前面に配置して、動画を操作できない(=常に音声なしでループ表示させる)ようにしています。

2.楽天Goldをファイルをアップロードする

楽天Goldのサーバスペースに、各ファイルをアップロードします。

3.RMS上の該当箇所にiframeを設置する

RMS上の動画を配置したい領域の編集エリアに、下記を記述します。

※ srcに楽天Goldにアップしたファイルの絶対パスを入力
※ scrolling=”no”、frameborder=”0″に設定
※ 動画の表示サイズは、width=””、height=””で調節

以上で完成です。

デモはこちらになります。
デモ

注意点

実際はRMS内の「ヘッダー・フッター・レフトナビ」のヘッダー領域に動画を付け加えたのですが、RMSのプレビュー画面でなぜか表示されず、小一時間悩みました。調べたところ、プレビューでは楽天Goldの内容が表示されないというだけだけのようなので、みなさまご注意ください。

まとめ

今回の方法は楽天サイト以外にも使えるので、今後制作するサイトにも活用して行きたいと思います。
最後まで読んでいただきありがとうございました。

ホームページ更新代行サービス

スマートスタイル・コンプレックス㈱では、企業や店舗・個人事業主のお客様に代わって、Webサイトの更新・管理・運用を代行する「ホームページ更新代行サービス」をご提供しています。

ホームページ更新代行サービス

最先端のテクニックと幅広い対応力、費用は月額定額、繰り越しもできる安心のポイント制で、これまで多数のお客様にご満足いただいております。

・ホームページの更新を効率化したい
・Web業者とのやり取りをスムーズにしたい
・更新しながらWebサイトを充実させたい(更新が止まっているホームページを生き返らせたい)

などなど、ホームページに関わるお客様のお悩みを解決します!

ホームページ更新代行サービスはこちら。

The following two tabs change content below.
ほっそー

ほっそー

デザイナー
どうも、sscの必殺仕事人です。影のように仕事をこなし、日々Webの修行中です。