[JS]YouTubeの動画をページ全体の背景に配置し、レスポンシブ対応の今時のテクニックを使ったチュートリアル

動画をページいっぱいの背景として使用するのは、ここ数年人気の高いテクニック。
その方法はいくつかありますが、今回はレスポンシブ対応、動画の上にコンテンツを配置しスクロールでカーテンのように引き上げるページを実装するチュートリアルを紹介します。

HTML5のvideo要素で自サーバーの動画を配置するのではなく、YouTubeの動画を使うので、サーバーのレスポンスを気にする必要もありません。

How to Build a YouTube Video Website Background

• デモ
• 実装

デモ

まずは、オンラインでデモをチェック！

デモページ

動画がページ全体の背景として表示されており、ブラウザのサイズを変えてもフィットしています。
スクロールすると、動画のポジションはそのままでコンテンツがカーテンを上げるように表示されます。

デモページ：少しスクロール

ソーシャルメディアのボタンなど、リンクするエレメントを配置することももちろん可能です。

デモページ：下までスクロール

実装

使用するリソース

チュートリアルにあたり、下記のリソースを使用しています。

• jQuery
• jquery.mb.YTPlayer
  YouTubeの動画を背景として表示するjQueryのプラグイン
• フォント：Google Fonts (Raleway, Lato)
• アイコン：Font Awesome

背景に使う動画の注意点

背景に使う動画は、下記の点に注意してください。

• 動画の長さは、15-30秒くらい。
• 自動再生対応。
• 音声は無し。
• テキストを上に重ねても読めるような動画。
• 動画は明瞭で簡潔なもの。

YouTubeの動画を利用するので、自サーバーのレスポンスを気にする必要はありません。

HTML

マークアップは、3つのsection要素を使用します。

<section class="big-background">
  //Big Background Content here
</section>
  <div class="wrapper">
<section class="about-section">
  //About Section Content here
</section>
<section class="small-background-section">
  //Small Background Section Content here
</section>
  </div>

.big-background

ページのベースとなるコンテンツ
ここの背景に動画を配置します。

.about-section

中央の白ベタ背景のコンテンツ

.small-background-section

一番下のソーシャルメディアを配置しているコンテンツ

.wrapper

中央と一番下はラッパーで内包します。

全体のコードはこんな感じに。

<section class="big-background">
  <a id="bgndVideo" class="player" data-property="{videoURL:'https://www.youtube.com/watch?v=iNJdPyoqt8U',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1}"></a>
  <div class="pattern"></div>

  <div class="big-background-container">
  ページのベースとなるコンテンツ
  </div>                                                    
</section>

  <div class="wrapper">
<section class="about-section">
  <div class="about-section-container">
  中央の白ベタ背景のコンテンツ
  </div>
</section>
<section class="small-background-section">
  <div class="pattern"></div>
  <div class="small-background-container">
  一番下のコンテンツ
  </div>
</section>
  </div>

背景に使う動画は、L.2のコード。

 <a id="bgndVideo" class="player" data-property="{videoURL:'https://www.youtube.com/watch?v=iNJdPyoqt8U',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1}"></a>

.player

jquery.mb.YTPlayerで使用するclass名

videoURL

動画のURL

containment

動画背景を表示させるDOM要素のCSSセレクタ

autoPlay

自動再生はオンに

mute

動画の音声は無しで

startAt

動画を開始する位置

opacity

動画の不透明度

JavaScript

jquery.mb.YTPlayerを使用し、動画を背景として配置します。

$(function(){
    $(".player").mb_YTPlayer();
  });

スクリプトのオプションでは、さまざまな設定ができます。

• Doc -jquery.mb.YTPlayer

スマホなどの小さい画面

小さいサイズの画面で動画を背景にすると、コンテンツに専念することができなくなってしまうことを心配する際は、動画が表示されないように指定しておきましょう。

@media screen and (max-width: 480px) {
.player{ display: none; }
}

HTML, CSS, JavaScriptなどのコードは、元ページからまとめてダウンロードできます。

How to Build a YouTube Video Website Background