【カスタマイズ】動画をヘッダーの背景に設定する方法
※2016年11月21日 更新コードや本文を一部変更済み。以前のものだと動画上下に黒い背景が表示されてしまうため、新たにjQueryを使用したコードに変更しました。詳細については、新たにご紹介した記事をご用意しましたので、ご参照ください。YouTube動画をヘッダーの背景に設定する方法-------先日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ファイルをダウンロードし、任意の場所にアップロードしておきます。tubularHTMLHTMLタグは、以下のものです。あなたのサイトの該当の部分に記述します。<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>CSSCSSコードは、以下のものです。あなたのサイトの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; }}※スマホでは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);※tubularは、MITライセンスのため、改変OKなプラグインですが、1〜11行目を記述しておかないといけません。その点ご注意下さい。>> サンプルページを参照してみてください。このヘッダー動画を採用しているサイト最近、サンプルページのようなヘッダー動画を採用しているサイトが、ちょこちょこ出てきております。動画を撮影される際の参考にしてみてください。※YouTube動画を活用したサイトではないのですが、動画を活用した参考事例としてご覧ください。BukwildHangar, Creative AgencyWAAAC※PCのみで表示可能です(現在スマホやタブレットでは表示されません)。MUJI to Sleep | 無印良品日清食品グループあなたの仕事を表現したものを流すと、訪問者としてもイメージしやすいですので、これから動画を利用したサイトデザインも増えてくることでしょう。飲食店や美容室、エステサロンなど、実店舗があるビジネスのサイトに特にオススメです。ぜひ、この方法を利用してみてください。では、また書きます。この記事の内容について、詳しく説明した記事を新たにご用意しました。ぜひ合わせてご覧ください。>> YouTube動画をヘッダーの背景に設定する方法※このカスタマイズ方法についての質問は受け付けておりません。