楽天サイトの背景にYoutubeの動画を配置する方法｜ホームページ更新代行サービスブログ
こんにちは、ほっそーです。
最近、楽天サイトのメインビジュアルに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サイトを充実させたい(更新が止まっているホームページを生き返らせたい)
などなど、ホームページに関わるお客様のお悩みを解決します！
ホームページ更新代行サービスはこちら。
ほっそー
最新記事 by ほっそー (全て見る)
- 楽天サイトの背景にYoutubeの動画を配置する方法｜ホームページ更新代行サービスブログ - 2016.12.22
