YouTube動画を背景に埋め込むプラグイン「YouTube Video Website Background」
Youtubeのデータをサイトに埋め込む、jQueryプラグイン「videobackground」を使ってみます。
YouTubeの動画を使うので、自前のサーバーのレスポンスを気にする必要がありません。さらにフリーのレンタルサーバーの多くは動画のような大きなデータのアップが不可能なので、一旦自前の動画データをYoutubeにアップしてから今回のようにプラグインを使うケースも出て来ます。
動画を背景する際に気をつけるポイント
動画の長さは、15-30秒くらいがベスト
自動再生対応
音声は無し
テキストを上に重ねても読めるような動画（CSSで対応でもOK）
解像度の低い動画を工夫して上手く使う
スマホの時は画像に
デモデータはsectionタグを使っていますが、授業ではdivで問題ありません。
必要な要素は「.big-background」で、ここに動画が入ります。
「.big-background」内のvideoURLに埋め込みたいyoutubeのURLを挿入しましょう。
「content」内にはテキスト等のコンテンツが入ります。
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>YouTubeを背景に設定</title> <link rel="stylesheet" href="css/normalize.css" media="all"> <link rel="stylesheet" href="css/style.css" media="all"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="js/device.min.js"></script> <script src="js/jquery.mb.YTPlayer.js"></script> <script src="js/custom.js"></script> </head> <body> <div class="big-background"> <a id="bgndVideo" class="player" data-property="{videoURL:' <span style="color: #ff0000">ここにyoutubeのURL</span> ',containment:'body',autoPlay:true, mute:true, startAt:1, opacity:1}"></a> <div class="pattern"></div> </div> <div class="content"> ここにコンテンツ </div> </body> </html>
今回のプラグインはオプション機能でスマホの時には動画データを見せずに代わりに画像に差し替えられる機能がついています。スマホの時の画像はCSSの「.big-background-default-image」に指定します。
また、jQuery本体は1.x系でないと動かないので注意が必要です。
