コーポレートサイトにちょうどいいJavaScriptライブラリ baserJS の解説記事です。
Webサイトと詳しいAPIリファレンスはこちら baserJS Webサイト
デモ
デモはこちは http://codepen.io/YusukeHirao/pen/empxXV
YouTubeを埋め込む
HTMLは前回と同様にdata-id、data-width、data-heightを指定するだけです。
<div class="youtube" data-id="rb0zOstIiyU" data-width="1920" data-height="1080"></div>
ここでのdata-widthとdata-heightは縦横比（アスペクト比）の基準の幅と高さになります。1920x1080であれば、16x9としても問題ありません。
背景にするためCSSを調整
画面いっぱいに引き伸ばす場合は以下のようにします。.youtubeの要素が基準になるので、デザインやレイアウトによって微調整してください。
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.youtube {
position: fixed;
top: 0;
left: 0;
z-index: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
JS側で背景化するメソッドを実行
$('.youtube')
.bcYoutube()
.bcBackground();
YouTube化した要素をそのままチェインでbcBackgroundメソッドを実行して背景化します。
背景の種類と基準位置の変更
bcBackgroundメソッドのオプションから背景の表示種類と、基準位置を変更できます。
bcBackgroundのオプション
|プロパティ|型|初期値|説明|
|---|---|---|---|---|
|align|string|"center"|基準の横位置を left か center か right に変更する
|valign|string|"center"|基準の縦位置を top か center か bottom に変更する
|size|string|"contain"|動画の引き伸ばし方を contain か cover に変更する
|child|string|">*:first"|自分をコンテナとして、背景にする対象の要素のセレクタ
次回はYouTube動画をレスポンシブに対応させる方法です。