メルセデス・ベンツ日本公式サイトでオリジナルアニメが公開されていますね。テレビでも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動画をサイトで紹介することが出来るクロムレスプレイヤーにもなりますが、今回はページの背景で動画を流す方法を説明したいと思います。