![YouTube動画ヘッダー背景](https://stat.ameba.jp/user_images/20161121/12/natural-creation/36/ae/p/o1310083413803174790.png?caw=800)
※2016年11月21日 更新
コードや本文を一部変更済み。以前のものだと動画上下に黒い背景が表示されてしまうため、新たにjQueryを使用したコードに変更しました。
詳細については、新たにご紹介した記事をご用意しましたので、ご参照ください。
-------
先日Youtube動画をヘッダーの背景として利用したサンプルページを作成してみました。
その紹介記事を書いてみたところ、ちょこちょこ反響をいただきましたので、今回この記事にてYoutube動画をヘッダーの背景に設定する方法についてご紹介していきます。
動画をお持ちの方は、ぜひチャレンジしてみてください。
Youtube動画をヘッダーの背景に設定する方法
完成イメージは、以下のサンプルページのヘッダーです。
>> 動画ヘッダーサンプル
※2016/11/21更新
新たな動画ヘッダーを作成しました。スマホ表示時ではブラウザの仕様上から自動再生が不可となっておりますので、画像表示にしてあります。表示確認される際はPCからご覧ください。
Youtube動画を用意する
Youtubeの動画のページにある共有→埋め込みコードから、以下のHTMLタグを取得してきます。
- <iframe width="560" height="315" src="//www.youtube.com/embed/lH4lc2JWDNM?rel=0" frameborder="0" allowfullscreen></iframe>
このHTMLタグのままですと、ヘッダーの背景としては自然な状態ではないので、
- 自動再生
- ループ再生
- 再生後に関連動画を非表示
- 動画のタイトルを非表示
といった機能を追加します。
- <iframe width="560" height="315" src="//www.youtube.com/embed/lH4lc2JWDNM?rel=0&showinfo=0&autoplay=1&loop=1&playlist=lH4lc2JWDNM" allowfullscreen></iframe>
黄色い背景の部分が、機能を追加するためのタグです。
最後の部分playlist=lH4lc2JWDNMの、lH4lc2JWDNMに、動画IDを記述します。
//www.youtube.com/embed/lH4lc2JWDNMの黄色い部分が動画IDなので、同じものを記述します。
これで、埋め込み動画用のHTMLタグの準備はOKです。
Youtube動画を表示させるプラグインを用意する
プラグインを使用して表示させます。以下からjsファイルをダウンロードし、任意の場所にアップロードしておきます。
HTML
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>
$(function(){
$('document').ready(function() {
var options = { videoId: '動画ID'};
$('#header').tubular(options);
});
}) (jQuery);
</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>
<script src="js/jquery.tubular.1.0.js"></script>
<script>
$(function(){
$('document').ready(function() {
var options = { videoId: '動画ID'};
$('#header').tubular(options);
});
}) (jQuery);
</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>
CSS
CSSコードは、以下のものです。
あなたのサイトの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;
}
}
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;
}
}
※スマホではYouTube動画を自動再生することができないため、代替え画像を用意し、画像URLを記述します。
jQuery
今回使用するtubularプラグインは、表示画面全体の背景に動画を表示させる仕様になっているため、jsファイル内を書き換えないといけません。
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);
|* 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行目を記述しておかないといけません。その点ご注意下さい。
このヘッダー動画を採用しているサイト
最近、サンプルページのようなヘッダー動画を採用しているサイトが、ちょこちょこ出てきております。動画を撮影される際の参考にしてみてください。
※YouTube動画を活用したサイトではないのですが、動画を活用した参考事例としてご覧ください。
Bukwild
![YouTube動画をヘッダー背景にする](https://web-bruno.com/wp-content/uploads/2016/11/youtube-header01-min.png)
Hangar, Creative Agency
![youtube-header02-min](https://web-bruno.com/wp-content/uploads/2016/11/youtube-header02-min.png)
WAAAC
![youtube-header03-min](https://web-bruno.com/wp-content/uploads/2016/11/youtube-header03-min.png)
※PCのみで表示可能です(現在スマホやタブレットでは表示されません)。
MUJI to Sleep | 無印良品
![youtube-header04](https://web-bruno.com/wp-content/uploads/2016/11/youtube-header04.png)
日清食品グループ
![youtube-header05](https://web-bruno.com/wp-content/uploads/2016/11/youtube-header05.png)
あなたの仕事を表現したものを流すと、訪問者としてもイメージしやすいですので、これから動画を利用したサイトデザインも増えてくることでしょう。
飲食店や美容室、エステサロンなど、実店舗があるビジネスのサイトに特にオススメです。
ぜひ、この方法を利用してみてください。
では、また書きます。
この記事の内容について、詳しく説明した記事を新たにご用意しました。ぜひ合わせてご覧ください。