LogoMark.png

jQuery/Tubular の変更点

#author("2020-02-02T18:07:10+09:00;2019-12-25T13:58:35+09:00","default:inoue.ko","inoue.ko")
#author("2026-07-28T16:08:40+09:00;2026-07-28T13:59:08+09:00","default:inoue.ko","inoue.ko")
*Tubular
YouTubeの動画を背景に　[[DEMO>https://design.kyusan-u.ac.jp/SampleSite/JQ_Tubular/]]
YouTubeの動画を背景に　[[DEMO>https://design.cs.kyusan-u.ac.jp/SampleSite/JQ_Tubular/]]
~
ここでは jQuery Tubularというプラグインを使って実現します。
&color(red){この事例はローカルでは動作しません。サーバーにアップしてお試し下さい。};
~

***準備
-1）jQuery Tubularをダウンロード
http://www.seanmccambridge.com/tubular/ 　から最新版をDLして下さい。
必要なのは ''jquery.tubular.xxxx.js''  だけです。

-2）構成ファイルの確認（ファイルは以下のように構成します。） 
--''index.html''
--css（フォルダ） /  ''style.css''
--js （フォルダ）/　jquery-xxxxx.min.js　jquery.tubular.xxxx.js　 ''sample.js''
注) xxxxx の部分（バージョン）は、書きかえが必要です。
~

***HTML
要点のみ記載します。
 <!DOCTYPE html>
 <html lang="ja">
 <head>
     <meta charset="UTF-8">
     <script src="js/jquery-xxxxx.min.js"></script>
     <script src="js/jquery.tubular.xxxx.js"></script>
     <script src="js/sample.js"></script>
     <link rel="stylesheet" href="css/style.css">
     <title>Sample Page</title>
 </head>
 <body>
     <div id="container">
     　：
     以下省略
 
~

***CSS
要点のみ記載します。
 *{
     margin:0; 
     padding:0;
 }
 
 #container {
     position: relative;
     width: 100%;
     height: 100%;
       ：
     background-color:  rgba(255,255,255,0.2);　
       /*　例）コンテナの背景は20%半透明　*/
 }
~

***JavaScript
 $(function(){
     $('document').ready(function() {
         var options = { videoId: '動画のID'};
         $('#container').tubular(options);
     });
 });

-動画のIDは、YouTube動画再生時のURLの  v=  の後の文字列です。
-$('#container').tubular(options); という記述の中の #container の部分がターゲット要素です。この領域に背景動画が表示されます。
-音の On/Off 他、[[いくつかのオプションがあります。>http://www.seanmccambridge.com/tubular/]]
複数のオプションを列挙する場合は、以下のルールです。
 var options = { videoId: '動画のID', mute: false, ・・};

-コントローラーの追加
以下のソースを加えるだけで、画面にコントローラーが表示され、それぞれが機能します。スクリプトの追加は不要です。
 <p id="video-controls" class="black-65">
   Video controls:<br />
   <a href="#" class="tubular-play">Play</a> | 
   <a href="#" class="tubular-pause">Pause</a> | 
   <a href="#" class="tubular-volume-up">Volume Up</a> | 
   <a href="#" class="tubular-volume-down">Volume Down</a> | 
   <a href="#" class="tubular-mute">Mute</a>
 </p>
~
~