Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Webサイトへの
Youtube設置方法
Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.
2
YouTube
の設置
Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 3
Youtube表示の種類
1. Youtubeの埋め込み表示
– 一番簡単です
2. クリックによるモーダル表示
– jQu...
Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.
4
1.埋め込み表示
Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 5
簡単な方法
• 設置手順
1. Youtobeにアクセスして動画を表示
2. 動画の下にある [共有] をクリック
3. [...
Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.
6
2.モーダル表示
Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 7
モーダル表示
• Lightboxプラグイン「Boxer」を使う
1. https://github.com/Formsto...
Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.
8
補足:パラメータ
Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 9
Youtubeのパラメータ
• YouTube動画のパラメータ
– サンプル
href="http://www.youtub...
Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 10
Youtubeのパラメータ
• YouTube動画のパラメータ
– modestbranding
• コントロールバーのY...
Copyright © 2015 Yoshihiro Takahashi All Rights Reserved.
11
3.背景全面
Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 12
背景全面
• jQuery Tubularを使う
1. http://www.seanmccambridge.com/tu...
Upcoming SlideShare
Loading in …5
×

WebサイトへのYotutube動画の設置

247 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

WebサイトへのYotutube動画の設置

  1. 1. Webサイトへの Youtube設置方法
  2. 2. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 2 YouTube の設置
  3. 3. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 3 Youtube表示の種類 1. Youtubeの埋め込み表示 – 一番簡単です 2. クリックによるモーダル表示 – jQueryPluginを使います – Lightbox風にYoutubeを表示します 3. 背景全画面表示 – jQueryPluginを使います – CSSで画像を重ねると良い感じになります
  4. 4. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 4 1.埋め込み表示
  5. 5. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 5 簡単な方法 • 設置手順 1. Youtobeにアクセスして動画を表示 2. 動画の下にある [共有] をクリック 3. [埋め込みコード] をクリック 4. [もっと見る] をクリック 5. [動画サイズ]を指定 6. アドレスをコピーし、HTMLファイルの任意の場所にペースト ② ③ ④
  6. 6. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 6 2.モーダル表示
  7. 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. 8. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 8 補足:パラメータ
  9. 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. 10. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 10 Youtubeのパラメータ • YouTube動画のパラメータ – modestbranding • コントロールバーのYouTubeロゴを非表示にする – color • 「進行状況バー」(プログレスバー、シークバー)の色を変え る(white、redのみ) – start • 再生を開始する位置を指定する(秒を正の整数で)
  11. 11. Copyright © 2015 Yoshihiro Takahashi All Rights Reserved. 11 3.背景全面
  12. 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ではライブプレビューで確認出来る

×