公開日：2015.11.16
更新日：
Youtube動画をWEBサイトに埋め込んで背景いっぱいに表示させる方法[jQuery tubular]
この記事の目次（クリックで項目へジャンプします）
前回フルスクリーンで表示される背景動画のオシャレなWEBサイトをまとめました。
ジャンル別で見る映像を上手く取り入れたオシャレなWEBデザイン
こんなにオシャレなサイトを見ていたら、とりあえずWEBサイトに動画を埋め込んでみたい衝動に駆られることでしょう。そこで今回は皆大好きYoutubeの動画をWEBサイトに埋め込む方法をご紹介します。
HTMLとCSSはこんな感じ
先にソースを公開します。折角なら大きくフルスクリーンで動画を再生し、ど真ん中にテキストを表示させましょう。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Youtube動画をWEBサイトに埋め込んでフルスクリーンで表示させよう</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="js/jquery.tubular.1.0.js"></script>
<link rel="stylesheet" href="style.css">
<script>
$(document).ready(function() {
$('body').tubular({
videoId: '25ZyvrfTSOw' // 埋め込みたいYoutubeのIDを記述します
});
});
</script>
</head>
<body>
<div id="wrapper">
<h1>Youtube動画をWEBサイトに埋め込んでフルスクリーンで表示させよう</h1>
</div>
</body>
</html>
CSS
@charset "UTF-8";
html, body {
width: 100%;
height: 100%;
margin:0;
padding:0;
color: white;
}
#wrapper {
width:500px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-250px;
text-align:center;
font-size:18px;
z-index:9999;
}
2〜6行目で、htmlとbody要素を画面いっぱいにします。#wrapperは中央に配置させたいので、topとleftそれぞれ50%にしたあと要素分のネガティブマージンを当てています。
Youtubeの動画を埋め込もう
tubular
http://www.seanmccambridge.com/tubular/
Youtube動画を埋め込みたいならjQueryプラグインのtubularはいかがでしょうか。このプラグイン、とても簡単なので導入には持って来いです。今回はtubularを使用した紹介をしますが、勿論他のプラグインでも構いません！
まず、tubularのサイトにアクセスして、右上のDownloadからGoogle Codeページへ飛びましょう。そして、左側のDownloadsから最新版のtubularをダウンロードします。解凍したらjsフォルダへ格納。
使い方
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="js/jquery.tubular.1.0.js"></script>
<script>
$(document).ready(function() {
$('body').tubular({
videoId: 'idOfYourVideo' // 埋め込みたいYoutubeのIDを記述します
});
});
</script>
1、2行目でjQueryライブラリとtubular.jsを読み込みます。
そして、6行目に動画を表示させたい要素（headerや#wrapperなど）を記述します。今回はbody要素に当てました。
$('body').tubular({
7行目で埋め込みたいYoutube動画のIDを記述します。「https://www.youtube.com/watch?v=xxxxxxx」の「xxxxxxx」の部分です。
videoId: '25ZyvrfTSOw' // 埋め込みたいYoutubeのIDを記述します
なんと設定はこれだけです。これだけでYoutubeの動画を埋め込むことが出来るんです。今回はmodeのサンプル動画を読み込みました！
あれ、でも動かないけど…？
このtubularというプラグイン、サーバーにアップしないと動きません！tubularに限らず、Youtubeなどの動画を読み込む系のプラグインはサーバーにアップしないと動作しないので、表示されないと慌てずテスト環境にアップしましょう。
そしてテスト環境にアップしたのがこちらになります！
色々なオプション
tubularはデフォルトで音声なし、繰り返し再生が設定されているため、導入するだけで背景動画として利用することができます。便利ですね。他にはどんなオプションが使えるか見てみましょう。
ratio: 16/9 // 「4/3」か「16/9」を選べます。 videoId: 'ZCAnLxRvNNc' // YoutubeのIDを入れます。必須。 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 //何秒から再生するかトリミングできます。
限定公開の動画でも読み込める
なんとこのプラグイン、Youtubeの限定公開の動画も読み込めるのです。背景として編集した動画は、動画単体として見ると味気なかったり何のことか分からなかったりします。なのでYoutubeから検索されたくない場合はYoutube動画の設定で限定公開にしておくと良いですよ。
いかがでしたか？次回はHTML5を使った映像の埋め込み方をご紹介します！
こちらもおすすめです！
