baserJSで埋め込んだYouTubeを背景動画にする

コーポレートサイトにちょうどいい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動画をレスポンシブに対応させる方法です。