Youtube埋め込み表示 Youtubeモーダル表示 Youtube背景全面表示

1. Webサイトへの
Youtube設置方法

2. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.
2
YouTube
の設置

3. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 3
Youtube表示の種類
1. Youtubeの埋め込み表示
– 一番簡単です
2. クリックによるモーダル表示
– jQueryPluginを使います
– Lightbox風にYoutubeを表示します
3. 背景全画面表示
– jQueryPluginを使います
– CSSで画像を重ねると良い感じになります

4. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.
4
１．埋め込み表示

5. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 5
簡単な方法
• 設置手順
1. Youtobeにアクセスして動画を表示
2. 動画の下にある [共有] をクリック
3. [埋め込みコード] をクリック
4. [もっと見る] をクリック
5. [動画サイズ]を指定
6. アドレスをコピーし、HTMLファイルの任意の場所にペースト
②
③
④

6. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.
6
２．モーダル表示

7. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 7
モーダル表示
• Lightboxプラグイン「Boxer」を使う
1. https://github.com/FormstoneClassic/Boxerにアクセスして
ファイルをダウンロード
2. jquery本体、jquery.fs.boxer.min.css、jquery.fs.boxer.min.js
をHTMLファイルに読み込む
3. <script>内に
$(“.boxer”).boxer();
を記載する
4. リンクを下記のように設定する
<a href="http://www.youtube.com/embed/ID" class="boxer"
data-gallery="videos" title="キャプション">動画もしくはテキ
スト</a>

8. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.
8
補足：パラメータ

9. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 9
Youtubeのパラメータ
• YouTube動画のパラメータ
– サンプル
href="http://www.youtube.com/embed/ID?controls=0&showinfo=0
&autoplay=1&rel=0"
– controls
• コントロールバーを非表示にする/表示する
– showinfo
• タイトルバーを非表示にする/表示する
– autoplay
• 自動的に再生を始める
– rel
• 再生後の「関連動画」を非表示にする/表示する

10. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 10
Youtubeのパラメータ
• YouTube動画のパラメータ
– modestbranding
• コントロールバーのYouTubeロゴを非表示にする
– color
• 「進行状況バー」（プログレスバー、シークバー）の色を変え
る（white、redのみ）
– start
• 再生を開始する位置を指定する（秒を正の整数で）

11. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.
11
３．背景全面

12. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 12
背景全面
• jQuery Tubularを使う
1. http://www.seanmccambridge.com/tubular/にアクセスして
ファイルをダウンロード
2. jquery本体、jquery.tubular.1.0.jsをHTMLファイルに読み込む
3. <script>内に
$('body').tubular({
videoId: ID
});
を記載する
4. 全てのファイルをサーバーにアップする
Bracketsではライブプレビューで確認出来る