webサイト制作の勉強|2018年9月クラス用ブログ

webサイト制作の勉強に関する解説ブログです。

YouTube動画を背景に埋め込むプラグイン「YouTube Video Website Background」

今回はYoutubeのデータをサイトに埋め込む、jQueryプラグイン「videobackground」を使ってみます。
YouTubeの動画を使うので、自前のサーバーのレスポンスを気にする必要がありません。さらにフリーのレンタルサーバーの多くは動画のような大きなデータのアップが不可能なので、一旦自前の動画データをYoutubeにアップしてから今回のようにプラグインを使うケースも出て来ます。



プラグインデータ
designmodo.com





動画を背景する際に気をつけるポイント

動画の長さは、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系でないと動かないので注意が必要です。