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

Post on:2015年2月3日

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

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

サイトのキャプチャ

How to Build a YouTube Video Website Background

デモ

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

デモのキャプチャ

デモページ

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

デモのキャプチャ

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

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

デモのキャプチャ

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

実装

使用するリソース

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

背景に使う動画の注意点

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

  • 動画の長さは、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();
  });

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

スマホなどの小さい画面

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

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

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

サイトのキャプチャ

How to Build a YouTube Video Website Background

sponsors

top of page

©2024 coliss