VimeoやYouTube動画をプラグイン無しで背景全画面に中央配置する方法

2017年2月12日

WEBサイトを作成する際、Vimeo動画やYouTube動画を背景いっぱいに表示したくなる事があると思います。そんな時にプラグインに頼らずに設定したいですよね。今回はシンプルなコードで、Vimeo動画やYouTube動画をアスペクト比を保ちながら全画面背景に設定する方法を解説したいと思います。

VimeoやYouTubeの動画コードを貼り付ける

まずは任意のVimeo動画やYouTube動画のiframe形式のコードを取得してhtmlに貼り付けます。サンプルはyoutubeですがVimeoも同様にiframe形式でコードを取得する事ができます。

<div id="video">
<iframe src="https://www.youtube.com/embed/testtest?playlist=testtest&autoplay=1&loop=1" frameborder="0" allowfullscreen></iframe>
</div>

YouTubeの場合、動画をループさせる為のパラメータは「loop=1」といれるのだが、そのままではループされないので注意が必要です。「loop=1」だけでなく「playlist=動画のID」もあわせて記載する必要があるようです。ちなみに、オートプレイは「autoplay=1」それぞれのパラメータは「&」でつなげます。

JqueryでVimeoやYouTube動画のサイズを制御する

次にウインドウサイズに応じて、アスペクト比率を保ったまま背景動画のサイズをリサイズするように制御します。

//ムービー全画面スクリプト（PC用）
//(1)動画の画角比率を設定します。4:3の場合はここを「4/3」に変更
var movieRatio = 16/9;  
//(2)画像のリサイズ関数「movieAdjust()」を作成
function movieAdjust(){
		var adjustWidth = $(window).width();
		var adjustHeight = $(window).height();
		if (adjustHeight > adjustWidth / movieRatio) {
				adjustWidth = adjustHeight * movieRatio;
		}
		$('iframe').css({width:(adjustWidth),height:(adjustWidth/movieRatio)});
}
//(3)画面リサイズ時と画面ロード時に関数movieAdjust()を実行
  $(window).on('load resize', function(){
    movieAdjust();
  });

(1)VimeoやYouTubeの動画の画角比率を設定

変数movieRatioを設定して、動画の縦横比率を設定します。YouTubeやVimeoは16:9なので「16/9」とします。

(2)VimeoやYouTubeの動画をリサイズするための関数を作成します。

動画のサイズを制御する為の関数movieAdjust()を作成します。ウインドウサイズの縦横をそれぞれ、変数「adjustHeight」「adjustWidth」に設定します。そしてif文にてウインドウの縦横サイズに応じてiframeの縦横サイズを設定します。このあたりは数学なので意味がわからない人はそのままコピペしてください。

(3)関数の実行タイミング

(2)で作った関数movieAdjust()を実行するタイミングを設定します。タイミングとしては、最初にページをロードした時とウインドウサイズをリサイズした時に実行したいので上記のようにloadとresizeのイベントのタイミングで実行するように記述します。

CSSで制御します。

次にcssで動画の位置などを制御します。

#video iframe{
  position: fixed;
  z-index: -1;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}

まずは動画を背面に設定する為に、position:fixed;に設定して、z-index;-1;にする事で背面へ移動します。

次に位置を画面の上下中央にする為に、topとleftを50%に右下に移動した上で、css3のtransformで上下-50%ずつ戻す事で動画を上下左右の中央に配置する事ができます。古いIE用にベンダープレフィックス-ms-transformを記述しておきます。

まとめ

最後に任意で背景動画の上に入れたいコンテンツを配置して完成です。最近VimeoやYouTubeの動画を背景全画面に表示するサイトをよく見かけるようになりましたが、たいていプラグインを利用しています。今回のように、プラグインに頼らずに自分でVimeoやYouTubeの動画を配置してみるのもいい勉強になるのではないでしょうか。