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

jQuery.mb.YTPlayer

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

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

このサイトを一部再現してみたいと思います。（注意：現在リニューアルされています。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を設定します。

<link href="../dist/css/jquery.mb.YTPlayer.min.css" media="all" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="../dist/jquery.mb.YTPlayer.min.js"></script>
<script src="assets/apikey.js"></script>
<style>
body {
    border: none;
    margin: 0;
    padding: 30px;
    background: #000;
    color: #FFF;
}

<style>

body {

border: none;

margin: 0;

padding: 30px;

background: #000;

color: #FFF;

}

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

<div id="video" class="player" data-property="{videoURL:'EQq6Z4IowfY',containment:'body', showControls:false, autoPlay:true, loop:true, mute:true, startAt:0, opacity:1, addRaster:true, quality:'default'}">My video</div>

1	<div id="video" class="player" data-property="{videoURL:'EQq6Z4IowfY',containment:'body', showControls:false, autoPlay:true, loop:true, mute:true, startAt:0, opacity:1, addRaster:true, quality:'default'}">My video</div>

オプションとして、*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のサイトの以下の場所です。

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

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>YouTube動画を簡単に背景にするjQuery「jquery.mb.YTPlayer」サンプル│ぱんにゃっと</title>

    <link href="../dist/css/jquery.mb.YTPlayer.min.css" media="all" rel="stylesheet" type="text/css">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="../dist/jquery.mb.YTPlayer.min.js"></script>
    <script src="assets/apikey.js"></script>
    <style>
        body {
            border: none;
            margin: 0;
            padding: 30px;
            background: #000;
            color: #FFF;
        }

        button {
            padding: 10px;
            font-size: 16px;
            display: inline-block;
            background: #f0f0f0;
            color: #444;
            line-height: 30px;
            margin: 3px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
        }

        button:focus {outline:none;}
 
    </style>

    <script>

        jQuery(function () {
            /* Initialize the player */
            var myPlayer = jQuery(".player").YTPlayer();
        });

    </script>
</head>
<body>
<div id="wrapper">
    <div id="customElement">
        <div id="testText">
            <h1>YouTube動画を簡単に背景にする<br>jQuery「jquery.mb.YTPlayer」サンプル</h1>
        </div>
    </div>

    <div style="padding: 20px;">
        <button onclick="jQuery('#video').YTPFullscreen()">go fullscreen</button>
    </div>


</div>

<div id="video" class="player" data-property="{videoURL:'EQq6Z4IowfY',containment:'body', showControls:false, autoPlay:true, loop:true, mute:true, startAt:0, opacity:1, addRaster:true, quality:'default'}">My video</div> 


</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>YouTube動画を簡単に背景にするjQuery「jquery.mb.YTPlayer」サンプル│ぱんにゃっと</title>

<style>

body {

border: none;

margin: 0;

padding: 30px;

background: #000;

color: #FFF;

}

button {

padding: 10px;

font-size: 16px;

display: inline-block;

background: #f0f0f0;

color: #444;

line-height: 30px;

margin: 3px;

border: none;

border-radius: 10px;

cursor: pointer;

}

button:focus {outline:none;}

</style>

jQuery(function () {

/* Initialize the player */

var myPlayer = jQuery(".player").YTPlayer();

});

</script>

</head>

<body>

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

</div>

<button onclick="jQuery('#video').YTPFullscreen()">go fullscreen</button>

</div>

<div id="video" class="player" data-property="{videoURL:'EQq6Z4IowfY',containment:'body', showControls:false, autoPlay:true, loop:true, mute:true, startAt:0, opacity:1, addRaster:true, quality:'default'}">My video</div>

</body>

</html>

あわせてお読みください

横スクロールさせたい時の簡単便利なjQueryプラグイン「Smooth Vertical or Horizontal Page Scrolling with jQuery」

Smooth Vertical or Horizontal Page Scrolling with jQuery 他のサイトと差をつけて、サイトを横スクロール…

YouTube埋め込み動画を簡単にレンスポンシブにしてくれる「SuperEmbed.js」

今やレスポンシブデザインにするのは当然の選択肢になりました。 YouTubeの動画をウェブサイトに埋め込むこともあると思いますが、動画もレスポンシブで表示させた…

まるでワープロ入力しているかのようにテキスト文章をアニメーションさせるjQueryプラグイン「jquery.jaticker.js」

今回ご紹介するのは、まるでその場で誰かが文章を入力しているかのようにテキストを表示するjQueryプラグイン「jquery.jaticker.js」です。サン…

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を使用した方が急に作動しなくなるということはなさそうですね。

5 Comments

doneru
2013/01/17 at 12:42 AM

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

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

ぱんにゃっと
2013/01/17 at 2:02 AM

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を使用した方が急に作動しなくなるということはなさそうですね。

mami
2013/10/09 at 9:12 PM

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

pannyatto (Post author)
2013/10/18 at 12:12 PM

mamiさま

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

mami
2013/12/16 at 4:30 PM

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

1 Pingback

Pingback: jquery.mb.YTPlayerはContact Form 7と使えない。 - 株式会社ウイン・ドゥ

ぱんにゃっとTutorial

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

ちょっと楽しいおすすめのサンプル

月額126円(税抜)から！WordPressも使えるクラウド型高速レンタルサーバー

カテゴリー

タグ

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

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

あわせてお読みください

5 Comments

1 Pingback

コメントを残すコメントをキャンセル

ぱんにゃっとTutorial

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

ちょっと楽しいおすすめのサンプル

人気記事ランキング

月額126円(税抜)から！WordPressも使えるクラウド型高速レンタルサーバー

カテゴリー

タグ

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

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

あわせてお読みください

5 Comments

1 Pingback

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル