youtubeの動画を背景にするjQueryプラグイン「videobackground」

HTML5が普及し、videoタグで動画をHTMLに入れる事が容易になり、最近は動画を使ったwebサイトも珍しくありません。

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

プラグインデータ

http://designmodo.com/video-background-website/

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

動画の長さは、15-30秒くらいがベスト
自動再生対応
音声は無し
テキストを上に重ねても読めるような動画（CSSで対応でもOK）
解像度の低い動画を工夫して上手く使う
スマホの時は画像に

デモデータはsectionタグを使っていますが、授業ではdivで問題ありません。
必要な要素は「.big-background」で、ここに動画が入ります。

「.big-background」内のvideoURLに埋め込みたいyoutubeのURLを挿入しましょう。
「content」内にはテキスト等のコンテンツが入ります。

<div class="big-background">
 <a id="bgndVideo" class="player" data-property="{videoURL:'https://www.youtube.com/watch?v=-zQWavER7to&list=RD-L9dqdDX9Ow&index=7',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1}"></a>
<div class="pattern"></div> 
<h1>YOUTUBE</h1>
 
</div>
<div class="content">
ここにコンテンツ
</div>

今回のプラグインはオプション機能でスマホの時には動画データを見せずに代わりに画像に差し替えられる機能がついています。スマホの時の画像はCSSの「.big-background-default-image」に指定します。
さらに今回heightの単位にvh（Viewport height）を使用します。今まで使用していた%の場合、親要素に基づくため、親要素自体に高さが必要になりますが、vhの場合それが不要です。

簡単に言うと、

幅指定は%

高さ指定はvh

と覚えましょう

/*動画部分*/
.big-background {
    z-index:550;
    text-align:center;
    height:100vh;
    position:relative;
    overflow:hidden;
    background-position:center bottom;
}

/*スマホの時に表示する画像部分*/
.big-background-default-image {
    background:url(../images/sunset.jpg);
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    width:100%;
    height:100%;
    z-index:0;
    backface-visibility:hidden
}

/*文字等が入る部分*/
.content {
  background: #FFF;
  width:100%;
  height:50vh;
}

javascript部分

<head>
<meta charset="utf-8">
<title>youtubeの動画を背景に</title>
<link rel="stylesheet" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic,700italic,900italic|Raleway:400,200,300,500,700,600,800,900' rel='stylesheet' type='text/css'>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="js/jquery-1.11.1.min.js"></script>
 <script src="js/device.min.js"></script> 
<script src="js/jquery.mb.YTPlayer.js"></script>
<script src="js/custom.js"></script>
<script>
$(function(){
    $(".player").mb_YTPlayer();
  });
</script>
</head>

WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

youtubeの動画を背景にするjQueryプラグイン「videobackground」

プラグインデータ

幅指定は%

高さ指定はvh