ぱんにゃっとTutorial

jQueryやWordPress、Webデザインに役立つ情報など

jQueryプラグイン, フルスクリーン, 動画

YouTube動画を簡単に背景にするjQuery「jquery.mb.YTPlayer」

YouTube動画を簡単に背景にするjQuery「jquery.mb.YTPlayer」

jQuery.mb.YTPlayer

メルセデス・ベンツ日本公式サイトでオリジナルアニメが公開されていますね。テレビでもCMに使われていたので、ご存知の方も多いと思います。

本編ムービーが公開されている公式サイトでは背景にテレビCMに使われた動画が流れるインパクトのあるサイトになっています。

参考:NEXT A-Class │ メルセデス・ベンツ日本公式サイト

このサイトを一部再現してみたいと思います。(注意:現在リニューアルされています。2016/10)

今回紹介するこのjQueryのコンポーネントを使用すると、ページの背景としてYouTubeムービーを設定することができます。

サンプルページを作ってみました

YouTube動画を簡単に背景にするjQuery「jquery.mb.YTPlayer」サンプル

過去にも『背景にフルスクリーンで動画を流す「jquery-tubular」』で、背景にYouTube動画を流すことが出来るjQueryを紹介しました。今回の「jquery.mb.YTPlayer」は「jquery-tubular」と違ってHTMLのBODYで要素として設定しています。

背景動画を透過させることが出来たり、ループさせたりと細かな設定が可能です。

この「jquery.mb.YTPlayer」は、ページの背景に動画を流すだけではなく、好きなYouTube動画をサイトで紹介することが出来るクロムレスプレイヤーにもなりますが、今回はページの背景で動画を流す方法を説明したいと思います。


【使用方法】
まずは、こちらのサイトから使用するファイルを一式ダウンロードしましょう。SAVEというところからダウンロードできます。

<head>部分にJavasSriptとCSSを設定します。

そして、<body>部分にHTMLを記述して完成です。

オプションとして、*data-property”に値を渡すことでプレーヤーの細かい設定を行うことができます。

  • videoURL:使用したいYouTube動画の共有URL
  • opacity:透過させる値 1~0.1
  • mute:ミュートにする true
  • showControls: true // or false コントロールパネル表示
  • quality: ‘default’ // or “small”, “medium”, “large”, “hd720”, “hd1080”, “highres”;
  • loop: true // (boolean) or false ループ(繰り返し)させる

ちなみに、YouTubeの共有URLはYouTubeのサイトの以下の場所です。
YouTube動画の共有URL場所

サンプルのソースを書いておきます。どうぞご参考まで。

この記事と関連してると思われる記事:


5 コメント

  1. doneru

    素敵な記事をありがとうございます。
    派手なサイトを製作する際に大変参考になりました。

    つい先ほど(1/17夕方)から、こちらのサンプルページでも急に動作しなくなりましたね。
    原因を探ってみましたが、最初に読み込むjqueryのバージョンを変えてみたところ、正常な動作に戻りました。
    ダウンロード版のjqueryを使用した方が動作が安定して良いのでしょうかねえ…?

    • ぱんにゃっと

      doneru様
      コメント頂きありがとうございます。
      そうなんですよね。たまたま当サンプルページを開いたところ動作していなかったので、少し原因を探っていましたが原因がわからず・・・。
      本家のDEMOは作動していたので、また明日確認してみようと思っていたところでした。

      原因はjQueryのバージョンでしたか。参考になるご意見ありがとうございました。

      こちらでも、
      script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js”
      の箇所を
      script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js”
      に変更してみたところ正常に動作しました。

      もとのソースでは、リリースされたばかりのjQueryv1.9.0を読み込みにいっていたようです。
      このjQueryプラグインは最新版のjQueryではまだ正常に作動しないみたいですね。
      おっしゃるとおり、ダウンロード版のjQueryを使用した方が急に作動しなくなるということはなさそうですね。

  2. mami

    ありがとうございました。YTPLAYERを実装することができました。 http://zoomuzik.com/
    ところでスマホを持っていない私は、街のお店でスマホでも見ることができるかどうか確認したところ、YOUTUBEが動きませんでした。これもjqueryのバージョンをおとしたほうがいいんでしょうか・・・

    • pannyatto

      mamiさま

      返事が遅くなって申し訳ありません。解決されたでしょうか?
      スマホとjQueryのバージョンとの絡みは、知識が乏しいのではっきりわかりません。申し訳ないです。。
      ただ、iPhoneだとFlashを動かすことができませんので、YouTubeは動かないと思います。

  3. mami

    回答、いただいていたのに、今日まで気がつきませんでした。ごめんなさい。
    同じスマホでも、動くものと、そうでないものがあるようです。機種によるのでしょうか・・・
    このまま、様子を見ようと思っています。
    ほんとうに、ありがとうございました。
    tamami

Leave a Reply

Theme by Anders Norén