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動画をサイトで紹介することが出来るクロムレスプレイヤーにもなりますが、今回はページの背景で動画を流す方法を説明したいと思います。

→「YouTube動画を簡単に背景にするjQuery「jquery.mb.YTPlayer」」の続きを読む