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

  • 3
    Like
  • 0
    Comment
More than 1 year has passed since last update.

コーポレートサイトにちょうどいいJavaScriptライブラリ baserJS の解説記事です。

Webサイトと詳しいAPIリファレンスはこちら baserJS Webサイト

デモ

デモはこちは http://codepen.io/YusukeHirao/pen/empxXV

YouTubeを埋め込む

HTMLは前回と同様にdata-iddata-widthdata-heightを指定するだけです。

<div class="youtube" data-id="rb0zOstIiyU" data-width="1920" data-height="1080"></div>

ここでのdata-widthdata-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" 基準の横位置を leftcenterright に変更する
valign string "center" 基準の縦位置を topcenterbottom に変更する
size string "contain" 動画の引き伸ばし方を containcover に変更する
child string ">*:first" 自分をコンテナとして、背景にする対象の要素のセレクタ

次回はYouTube動画をレスポンシブに対応させる方法です。