Webサイトのトップページの背景に動画（YouTube）を配置する方法
YouTube movie to your page background
Webサイトのトップページの背景に動画（YouTube）を配置する方法
tubular というJqueryを使って実装しています。まずは tubular のサイトからJSファイルをゲットしましょう。
ダウンロードしたzipファイルを解凍し、js フォルダから jquery.tubular.1.0.js ファイルを取り出して、任意の場所に保存します。
※このテーマ（PILGRIM）を使用していれば、テーマフォルダにjsフォルダがあるので、その中に保存。パスは src=”js/jquery.tubular.1.0.js” となります。
<body></body>内は、<div id=”movie”></div>で囲まれた部分が動画の上に重ねられます。
JqueryによってHTML内に動画の要素（#tubular-container と #tubular-shield）が入れ込まれる箇所は、<body>の直下、<header>または<main>などのコンテンツの上に入ります。
このページには、ビデオコントロールボタンを設置してありますので、以下のように、WordPress のダッシュアイコンを使用した例となります。
このテーマでは、WordPress の管理画面で使われているダッシュアイコンが投稿・固定ページに使用できます。使用方法は、HTMLまたはCSSにてアイコンフォントを指定します。
<div id="movie">
<div class="video-control">
<a href="#" class="tubular-play"><span class="dashicons dashicons-controls-play"></span></a>
<a href="#" class="tubular-pause"><span class="dashicons dashicons-controls-pause"></span></a>
<a href="#" class="tubular-volume-up"><span class="dashicons dashicons-controls-volumeon"></span></a>
<a href="#" class="tubular-volume-up"><span class="dashicons dashicons-plus-alt2"></span></a>
<a href="#" class="tubular-volume-down"><span class="dashicons dashicons-minus"></span></a>
<a href="#" class="tubular-mute"><span class="dashicons dashicons-controls-volumeoff"></span></a>
</div>
</div><head></head>内に次のコードを加えます。
JavaScriptの読み込みは、まずGoogle APIからJqueryを読み込み、
次にダウンロードした jquery.tubular.1.0.js ファイルを保存したファイルのパスを指定して読み込み、
最後の<script>は、ビデオの選択やコントロールを指定します。
- videoId: ‘YouTubeのID（共有ボタンを押したときのURL末尾）’
- mute: true または false（再生されたときに動画の音を消す（true）、または消さない（false））
- start: 動画再生開始時間の指定（秒数）
- playButtonClass: ビデオコントロールボタンのON/OFF（HTMLの要素にクラスを指定するとボタンが現れます）
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.1.0.js"></script> <!-- 保存したディレクトリにパスを書き換え -->
<script>
$('document').ready(function() {
var options = {
videoId: 'yW0gcvbzgIw',
mute: true,
start: 15,
playButtonClass: 'tubular-play',
pauseButtonClass: 'tubular-pause',
muteButtonClass: 'tubular-mute',
volumeUpClass: 'tubular-volume-up',
volumeDownClass: 'tubular-volume-down',
};
$('#movie').tubular(options);
});
</script>このテーマで tubular を画面いっぱいに敷き詰めるには、iframe に700pxを指定してあるので、クリアのための以下のCSSが必要です。
<style>
/* ヘッダーを透明に指定 */
#header {
background: none;
}
/* カテゴリ、ページナビ、コメント、フッターを前面に表示させるためのスタイル */
.post-categories,
.page-navigator,
#renspond,
#footer {
z-index: 99 !important;
position: relative;
}
/* iframeの最大幅とパディングをクリア */
iframe#tubular-player {
max-width: none;
padding: 0px;
}
/* ビデオコントローラー */
.video-control {
max-width: 700px;
padding: 0 15px;
margin: 0 auto;
display: flex;
}
.video-control a {
width: 50px;
height: 50px;
}
.video-control a span:before {
font-size: 40px;
color: #fff;
}
/* 文字が読みづらいため、ビデオ全体を暗く */
#tubular-container:before {
position: absolute;
content: " ";
top: 0;
left: 0;
background: #0000005e;
width: 100%;
height: 100%;
z-index: 2;
}
</style>© 死者より（From The Dead) / 坂本慎太郎（zelone records official)
New tune “From The Dead” taken from Shintaro Sakamoto’s new single “Dont’ Know What’s Normal” will be available in stores Friday, January 11th 2013. Directed by Yasuyuki Yamaguchi (OMB)
© tubular, a YouTube Background Player jQuery Plugin | Sean McCambridge Design
Geometric and Psychedelic Animated GIF
Leave a Comment