YouTube動画をヘッダーの背景に設定する方法

YouTube動画をヘッダーの背景に設定する案件がありまして、その際に使用した方法についてご紹介します。

YouTube動画を画面全体に表示させる方法というのはよく見かけるのですが、ヘッダーなどの一部の要素のみに表示させる方法というのが見つからず、色々と試行錯誤した結果、今回の方法にたどり着きました。

現在YouTubeで動画を配信している方はとても多く、自身のビジネスに活用している方としては、配信しているYouTube動画をサイト上に利用したいというケースは増えております。備忘録的な内容ですが、ぜひみなさんも設定してみてください。

YouTube動画をヘッダーに設定したサンプル

サンプルをご用意しましたので、まずはそちらから御覧ください。

※音は再生されず、ヘッダーに動画のみが表示されています。
※スマホでは仕様上YouTube動画を自動再生させることができないので、代替え画像にて対応しております。実際の表示確認は、PCやタブレットにてご確認ください（iPadにて確認済み）。

サンプルで使用した動画は、今回使用するプラグイン内のサンプルでも使われている動画（※）を使用させていただきました。
※リンク先はYouTubeのページです。自動で音声も流れますので表示させる場合にはご注意ください。

YouTube動画ヘッダーの仕様ついて

YouTube動画を貼り付ける方法としてはCSSだけで設定する方法もありますが、動画の上下に黒背景が表示されてしまうので、高さを合わせるのが面倒であったりします。色々と試した結果、jQueryプラグインのtubularを使用するのがベストでしたので、こちらを利用してご紹介します。

動画背景の仕様

YouTube動画を画面横いっぱいに表示させます。
動画やヘッダーの表示領域（高さ）は固定されます。
スマホ表示の場合、YouTube動画を表示させることができないので、代替え画像を表示させます。
背景として利用するので、動画を操作するコントローラー等は非表示になります。
YouTube動画をヘッダーの背景としてご紹介してますが、応用すれば他の箇所でも表示させることは可能です。

YouTube動画プラグインtubularをダウンロードする

先述したようにjQueryプラグインを使用しますので、ファイルをダウンロードしてきます。

今回使用するjQueryプラグイン

上記リンク先では、下の画像のようなページが表示されます。
このページ自体がサンプルとなっており、画面いっぱいにYouTube動画が表示されています。また、使用方法やオプションなどの記載もありますので、こちらも参考にしてみてください（英文）。

このページの右上にある『Download jQuery tubular on Google Code』をクリックすると、Google Codeのページに移ります。

左サイドバーにある『Downloads』をクリック。

すると、下のようにバージョン毎にダウンロードできるページが表示されます。

好きなものをダウンロードして構いませんが、今回は、『jquery.tubular.1.0.1.zip』をダウンロードしました。

その中にあるファイル『jquery.tubular.1.0.js』を使用していきます。

YouTube動画を設定する

tubularでは、YouTube動画を画面全体に表示させる仕様になっているので、HTMLとCSSファイルに記述する他に、先ほど用意したjsファイルの一部を書き換えないといけません。

そこでまずは、部分的な説明から始めていきます。

HTMLやCSSと、jsファイルの書き換え

HTMLはシンプルなマークアップで問題ありません。

<header id="header">
	<div class="header_area">
		<h1 class="logo">
			<a href="">タイトル</a>
		</h1>
		<nav class="header_nav">
			<ul>
				<li><a href=""></a></li>
				<li><a href=""></a></li>
				<li><a href=""></a></li>
			</ul>
		</nav>
	</div><!-- .header_area -->
</header>

2行目と13行目で、タイトルやナビゲーションを括っております。この中には、動画の上に表示させたい要素を記述してください。

CSSも特に難しくコーディングする必要はなく、一般的なもので大丈夫です。

#header {
	height: 500px;
	overflow: hidden;
}
.header_area{
	position: relative;
	margin: 0 auto;
	width: 1280px;
	z-index: 1000;
}

@media screen and (max-width: 1280px){
	.header_area{
		width: 100%;
	}
}

@media screen and (max-width: 640px){
	#tubular-container iframe {
		display: none;
	}

	#header{
		background-image: url(代替え画像URL);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
}

※先述したHTMLでは、タイトルやナビゲーションなどの記載がありますが、分かりやすくするためCSSでは記述を省いております。

2行目でヘッダーの高さを指定しております。この他に、jsでも指定する箇所があるので、ここで設定した数値は覚えておいて下さい。

また、9行目でz-index: 1000;を指定しておりますが、これは動画の上にコンテンツを表示させるために必要となります。今回使用する動画プラグインでは、デフォルトでz-index: 99;を指定されておりますので、それよりも大きな数値を設定しておくことで、指定した要素を動画の上に表示させることができます。

6行目のposition: relative;も合わせて記述しておかないとz-indexが効かないので、その点注意が必要です。

あと、スマホ上でYouTube動画の自動再生ができないため、スマホ表示時では代替え画像を表示させるようになります。その記述が18行目〜29行目です。

24行目のbackground-image: url(代替え画像URL);に代替え画像のURLを記述し、表示させます。

次に、jsファイルを設定していきます。
任意の場所にquery.tubular.1.0.jsをアップロードしておき、以下をHTML内に記述します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/jquery.tubular.1.0.js"></script>
<script>
	$('document').ready(function() {
		var options = { videoId: '動画ID'};
		$('#header').tubular(options);
	});
</script>

5行目には、YouTube動画のIDを記述します。動画IDはYouTubeページのURL内に記載されております。
https://www.youtube.com/watch?v=ab0TSkLe-E0
『=』の後が動画IDですので、これを該当の箇所に記述します。

6行目では、どの要素に設定するか指定してます。今回はヘッダー内なので、#headerに指定してます。

これでYouTube動画は表示されるのですが、画面全体の背景として表示されてしまいます。tubularでは、画面全体に動画が表示される仕様なのです。
なので、jsファイルを一部変更する必要があります。

『jquery.tubular.1.0.js』内の38行目を以下のように設定します。

$body = $('#header') // cache body node

また、42行目を以下のものに書き換えます。

var tubularContainer = '<div id="tubular-container" style="overflow: hidden; position: fixed; z-index: 1; width: 100%; height: 500px"><div id="tubular-player" style="position: absolute"></div></div><div id="tubular-shield" style="width: 100%; height: 500px; z-index: 2; position: absolute; left: 0; top: 0;"></div>';

ちょっと見づらいのですが、これは、先に設定した#headerの中に記述されるHTMLタグでして、これをページ内に追加させることにより、YouTube動画を表示させております。この記述内でstyleを指定しておりますので、必要な箇所を変更しておきます。

ここでは高さを指定したいので、#tubular-containerと＃tubular-shieldの2ヶ所にheight: 500pxを指定しておきました。この数値は設定したい要素の高さに合わせて設定してみてください。

また、45行目でも高さ指定する箇所があるので、以下の記述に書き換えます。

$('#header').css({'width': '100%', 'height': '500px'});

冒頭の$('#header').も、デフォルトでは$('body').になっているので、書き換えます。

最後に107行目も以下のものに書き換えます。

$('#header').on('click','.' + options.playButtonClass, function(e) { // play button

これで、完成です。

コピペはこちらから

先述したコードをまとめたものをご用意しましたので、コピペはこちらのものをご利用ください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/jquery.tubular.1.0.js"></script>
<script>
	$('document').ready(function() {
		var options = { videoId: '動画ID'};
		$('#header').tubular(options);
	});
</script>

<header id="header">
	<div class="header_area">
		<h1 class="logo">
			<a href="">タイトル</a>
		</h1>
		<nav class="header_nav">
			<ul>
				<li><a href=""></a></li>
				<li><a href=""></a></li>
				<li><a href=""></a></li>
			</ul>
		</nav>
	</div><!-- .header_area -->
</header>

#header {
	height: 500px;
	overflow: hidden;
}
.header_area{
	position: relative;
	margin: 0 auto;
	width: 1280px;
	z-index: 1000;
}

@media screen and (max-width: 1280px){
	.header_area{
		width: 100%;
	}
}

@media screen and (max-width: 640px){
	#tubular-container iframe {
		display: none;
	}

	#header{
		background-image: url(代替え画像URL);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
}

jsファイルは全て書き換えられるように、全文を表示してあります。1〜11行目のライセンス部分も合わせて記述してください。

/* jQuery tubular plugin
|* by Sean McCambridge
|* http://www.seanmccambridge.com/tubular
|* version: 1.0
|* updated: October 1, 2012
|* since 2010
|* licensed under the MIT License
|* Enjoy.
|*
|* Thanks,
|* Sean */

;(function ($, window) {

    // test for feature support and return if failure

    // defaults
    var defaults = {
        ratio: 16/9, // usually either 4/3 or 16/9 -- tweak as needed
        videoId: 'ZCAnLxRvNNc', // toy robot in space is a good default, no?
        mute: true,
        repeat: true,
        width: $(window).width(),
        wrapperZIndex: 99,
        playButtonClass: 'tubular-play',
        pauseButtonClass: 'tubular-pause',
        muteButtonClass: 'tubular-mute',
        volumeUpClass: 'tubular-volume-up',
        volumeDownClass: 'tubular-volume-down',
        increaseVolumeBy: 10,
        start: 0
    };

    // methods

    var tubular = function(node, options) { // should be called on the wrapper div
        var options = $.extend({}, defaults, options),
            $body = $('#header') // cache body node
            $node = $(node); // cache wrapper node

        // build container
        var tubularContainer = '
';

        // set up css prereq's, inject tubular container and set up wrapper defaults
        $('#header').css({'width': '100%', 'height': '500px'});
        $body.prepend(tubularContainer);
        $node.css({position: 'relative', 'z-index': options.wrapperZIndex});

        // set up iframe player, use global scope so YT api can talk
        window.player;
        window.onYouTubeIframeAPIReady = function() {
            player = new YT.Player('tubular-player', {
                width: options.width,
                height: Math.ceil(options.width / options.ratio),
                videoId: options.videoId,
                playerVars: {
                    controls: 0,
                    showinfo: 0,
                    modestbranding: 1,
                    wmode: 'transparent'
                },
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }

        window.onPlayerReady = function(e) {
            resize();
            if (options.mute) e.target.mute();
            e.target.seekTo(options.start);
            e.target.playVideo();
        }

        window.onPlayerStateChange = function(state) {
            if (state.data === 0 && options.repeat) { // video ended and repeat option is set true
                player.seekTo(options.start); // restart
            }
        }

        // resize handler updates width, height and offset of player after resize/init
        var resize = function() {
            var width = $(window).width(),
                pWidth, // player width, to be defined
                height = $(window).height(),
                pHeight, // player height, tbd
                $tubularPlayer = $('#tubular-player');

            // when screen aspect ratio differs from video, video must center and underlay one dimension

            if (width / options.ratio < height) { // if new video height < window height (gap underneath)
                pWidth = Math.ceil(height * options.ratio); // get new player width
                $tubularPlayer.width(pWidth).height(height).css({left: (width - pWidth) / 2, top: 0}); // player width is greater, offset left; reset top
            } else { // new video width < window width (gap to right)
                pHeight = Math.ceil(width / options.ratio); // get new player height
                $tubularPlayer.width(width).height(pHeight).css({left: 0, top: (height - pHeight) / 2}); // player height is greater, offset top; reset left
            }

        }

        // events
        $(window).on('resize.tubular', function() {
            resize();
        })

        $('#header').on('click','.' + options.playButtonClass, function(e) { // play button
            e.preventDefault();
            player.playVideo();
        }).on('click', '.' + options.pauseButtonClass, function(e) { // pause button
            e.preventDefault();
            player.pauseVideo();
        }).on('click', '.' + options.muteButtonClass, function(e) { // mute button
            e.preventDefault();
            (player.isMuted()) ? player.unMute() : player.mute();
        }).on('click', '.' + options.volumeDownClass, function(e) { // volume down button
            e.preventDefault();
            var currentVolume = player.getVolume();
            if (currentVolume < options.increaseVolumeBy) currentVolume = options.increaseVolumeBy;
            player.setVolume(currentVolume - options.increaseVolumeBy);
        }).on('click', '.' + options.volumeUpClass, function(e) { // volume up button
            e.preventDefault();
            if (player.isMuted()) player.unMute(); // if mute is on, unmute
            var currentVolume = player.getVolume();
            if (currentVolume > 100 - options.increaseVolumeBy) currentVolume = 100 - options.increaseVolumeBy;
            player.setVolume(currentVolume + options.increaseVolumeBy);
        })
    }

    // load yt iframe js api

    var tag = document.createElement('script');
    tag.src = "//www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // create plugin

    $.fn.tubular = function (options) {
        return this.each(function () {
            if (!$.data(this, 'tubular_instantiated')) { // let's only run one
                $.data(this, 'tubular_instantiated',
                tubular(this, options));
            }
        });
    }

})(jQuery, window);

※tubularは、MITライセンスのため、改変OKなプラグインですが、1〜11行目を記述しておかないといけません。その点ご注意下さい。