HOME > コラム > jQuery/JS Chips > YouTubeの動画を背景に入れて表示することが出来るjQueryプラグイン「jquery-tubular」の使い方

YouTubeの動画を背景に入れて表示することが出来るjQueryプラグイン「jquery-tubular」の使い方

コラム

jquery-tubularは、YouTubeの動画を、WEBサイトの背景に設置することが出来るjQueryプラグインです。
動画を背景にすると、素材次第によっては相当に重いファイルになってしまうことがありますが、YouTubeであれば、色んな意味で助かることがあります。
なので、背景素材に動画を使うのであれば、YouTubeにアップして再生が軽い状態にしたものであれば、ブラウザや回線の負担がだいぶと軽くなるのではないでしょうか。
ちょっと邪魔な表示があるかもしれませんが、滞在時間くらいは特に問題ないように思いますので、背景に動画を入れられたい方は必見です。
「ちょっとは役に立ったかな？」や「ちょっと面白いな（笑）」みたいなことを感じられましたら、シェアして頂けますと幸いです。

jQuery/JS Chipsに投稿したコラム記事

YouTubeの動画を背景に入れて表示することが出来るjQueryプラグイン「jquery-tubular」の使い方

背景にYouTube動画を入れるjQueryプラグイン

jquery-tubularは、ページの背景、コンテンツの背景にYouTubeの動画を設置することが出来るjQueryプラグインです。
以前にも、同じようなjQueryプラグインを紹介いたしました。

このjQueryプラグインは、画像を背景に入れるというものでした。
今回は、画像ではないということと、コントロールはJavaScriptを使っているという感じです。

音量や再生一時停止などのコントローラーも一応ありますので、必要とあれば使ってください。

本家サイトとGoogle Code

本家サイトとGoogle Codeです。
プラグイン一式をダウンロードして頂けます。

ダウンロードと組み込みサンプル
組み込み済みファイルのダウンロード
phptemp_jt_171113.zip
組み込み済みサンプル

サンプルです。

今回はトップページにのみ設置しています。

元になるWEBサイトテンプレート（PHP）について

当サイト内の「SEOの基礎知識」の中のコンテンツです。

ポイント
追加で読み込ませたファイル

今回、追加で読み込ませたファイルはjsファイルとcssファイルでした。
cssファイルは装飾のためですので、当サイトのcssを基準としてカスタマイズしていただければ簡単にできるのではないでしょうか。 

<link href="/css/videobox.css" type="text/css" rel="stylesheet" />
<script src="/js/index.js"></script>
<script src="/js/jquery.tubular.1.0.js"></script>

上記の「index.js」の中に、背景に入れる動画のIDを設定する箇所がございます。
そこでIDを書き換えることで、動画を変えることができます。
そして、「index.js」が簡易的な設定ファイルになります。 

$('document').ready(function() {
	var options = { videoId: 'PCuzgXdm3R8', start: 3 };
	$('#videobox').tubular(options);
});
  • YouTubeのID : PCuzgXdm3R8
  • URL : https://www.youtube.com/watch?v=PCuzgXdm3R8

また、動画を背景に入れるための補助的な役割を持ったCSSを全部のデバイスで共通して使えるように「videobox.css」として作成いたしました。
これを全デバイスで共通で読み込ませてください。

htmlの設定記述

HTMLで必要な記述というところですが、bodyの次に「id="videobox"」のdivを追記してください。
今回のサンプルでは、この「id="videobox"」の中の背景にYouTubeの動画を入れている感じです。 

<body>
<div="videobox">

〜〜コンテンツ〜〜

</div>
</body>
動画のコントローラーについて

当サイトのサンプルではフッター部分にコントローラーを書き入れました。
トップページにのみ背景に動画を入れているので、このコントローラーもトップページのみフッターに入れています。 

<div id="footdisc">
<h4>
フッターにページのサブキャッチ的な・・・。<br />全ページ共通していません。<br />
<a href="#" class="tubular-play">再生</a> | <a href="#" class="tubular-pause">一時停止</a> | <a href="#" class="tubular-volume-up">音量上げる</a> | <a href="#" class="tubular-volume-down">音量下げる</a> | <a href="#" class="tubular-mute">音を消す</a>
</h4>
</div>

ポイントは、aタグの中にあるclassが重要なところです。
このclassの中は、本体jsファイルでコントロールしています。
通常、そのまま使っても問題なさそうですので、そのままお使いください。

最後に動作確認

ということで、最後は動作確認をして終了です。
動作確認と言いますか、ページの背景にYouTubeの動画が入って入れば完成です。

その他、補足

WEBサイトテンプレート（PHP）の修正にあたって、以下の点に配慮しています。

  • 今回、サンプルにしたWEBサイトテンプレート（PHP）は「 phptemp_171030.zip 」です。
締め

いかがでしたでしょうか？
特に難しいわけではありませんが、細かい設定をする上で理解が足りていないとしんどいことがあったかもしれません。

本体のjsファイルの中には、デフォルトで設定内容が書かれています。
この部分を上手く変えると、色々な調整が出来るようですが、知識がそれなりにないとしんどそうです。

とりあえずはそのままでも使えると思いますので、レスポンシブで制作していて尚且つ背景に動画を入れておしゃれな感じにしたい時には使えるスクリプトだと思います。
まずは上手く動作するように、触ってみてくださいね。

執筆 : 清水 隼斗

YouTubeの動画を背景に入れて表示することが出来るjQueryプラグイン「jquery-tubular」の使い方の通常ページ