楽天サイトの背景にYoutubeの動画を配置する方法|ホームページ更新代行サービスブログ楽天サイトの背景にYoutubeの動画を配置する方法|ホームページ更新代行サービスブログ2016.12.22ほっそーCSSHTMLJavaScriptWebデザインWeb制作ブログこんにちわ、ほっそーです。最近、楽天サイトのメインビジュアルにYoutubeの動画を流したいという要望がありまして、いろいろ調べて実現できたので、忘れないうちに記事にします。API」と「楽天Gold」を使用する必要があります。API楽天Goldは、楽天が各店舗に提供している、専用のサーバースペースを使って好きなファイルをアップロードして使用できるサービスです。API?一般的なYoutubeの埋め込みの場合、単に埋め込むのみであれば簡単に行なえますが、自動再生にしたり、音声のデフォルト値を設定したりするなど、細やかなコントロールができません。スタイルの自由度もほとんどありません。APIを使用すれば、そのあたりのコントロールが簡単に行えます。楽天Gold?RMS(楽天が提供する店舗用のCMS)は、楽天以外の外部サイトのURLが利用できず、またJavaScriptを記述することが許可されていません。APIは外部サイトを参照する必要があり、かつ設定はjsで記述するため、RMSでは動かすことができません。APIを動かすことが可能です。APIを使って動画を表示します。jsのソースコードは下記の記事を参考にさせていただきました。jQuetyを使わずにYoutubeの動画を背景に設置する。montblan9.net下記、js、html、cssのソースです。iframe動画の表示領域の大きさを設定しています。APIを使用すると、動画はiframeで出力されます。.movie動画サイズと表示位置を調整しています。topにマイナスの値を指定して、動画の中央が表示領域の真ん中に来るように調整しています。.box動画表示領域の親要素です。overflow:hiddenではみ出る部分を隠しています。z-indexの値を調整して動画の前面に配置して、動画を操作できない(=常に音声なしでループ表示させる)ようにしています。2.楽天Goldをファイルをアップロードする楽天Goldのサーバスペースに、各ファイルをアップロードします。3.RMS上の該当箇所にiframeを設置するRMS上の動画を配置したい領域の編集エリアに、下記を記述します。デモはこちらになります。実際はRMS内の「ヘッダー・フッター・レフトナビ」のヘッダー領域に動画を付け加えたのですが、RMSのプレビュー画面でなぜか表示されず、小一時間悩みました。調べたところ、プレビューでは楽天Goldの内容が表示されないというだけだけのようなので、みなさまご注意ください。まとめ今回の方法は楽天サイト以外にも使えるので、今後制作するサイトにも活用して行きたいと思います。最後まで読んでいただきありがとうございました。ホームページ更新代行サービススマートスタイル・コンプレックス(株)では、企業や店舗・個人事業主のお客様に代わって、Webサイトの更新・管理・運用を代行する「ホームページ更新代行サービス」をご提供しています。最先端のテクニックと幅広い対応力、費用は月額定額、繰り越しもできる安心のポイント制で、これまで多数のお客様にご満足いただいております。・ホームページの更新を効率化したい・Web業者とのやり取りをスムーズにしたい・更新しながらWebサイトを充実させたい(更新が止まっているホームページを生き返らせたい)などなど、ホームページに関わるお客様のお悩みを解決します!ホームページ更新代行サービスはこちら。最新の記事ほっそーどうも、sscの必殺仕事人です。影のように仕事をこなし、日々Webの修行中です。