こんにちは、デザイナーのぺちこです。
さて、前回「YouTube動画コンテンツの埋め込みをしよう【紹介編・オリジナルUIと導入サイトまとめ】」という記事を書き、末尾で「次回は実践です！」と予告してしまったので…勉強してきました！
以前に「サイトでおしゃれに動画再生！オリジナルUIの全画面動画を実装！」という記事を書いたのですが、基本的にはこれと同じことをYouTubeAPIでやってしまおう、というのが今回の趣旨になります。それでは早速いってみましょう。
DEMO
今回は、以下の項目にあてはまるような方にお使いいただけるサンプルを準備しました。サクッと実装しないといけないデザイナーさんに向けて作ったものです！
しかし、私も所詮しがないデザイナー…。JavaScriptに堪能な方は、多分自分で書いたほうがスマートだと思います…。すみません、すみません…。
こちらは以下のような人におすすめです。
- サイトの背景動画として使いたい
- オリジナルのコントローラーでサイトの雰囲気を壊さず埋め込みたい
- YouTubeとサイトで同時展開してるから動画の管理を一括化したい
- videoで実装してたけどエンコードするの面倒くさい
- IE8でも…対応したいんですよね…
私は5つとも当てはまっていたりするわけです。私得。
- サンプルダウンロード
また、勉強も楽しくないとだめだと思うので、愛らしいうさぎの動画（↓）を使って埋め込みを実践しました。ありがとうございました。
- 赤ちゃんうさぎがちょろちょろ♪ – YouTube
https://www.youtube.com/watch?v=ovO8J7ytDMM
今回のサンプルについて
今回の記事は、全面的に公式リファレンスを参考にさせていただきました。
- YouTube JavaScript Player API Reference
https://developers.google.com/youtube/js_api_reference
なお、YouTubeのAPIはIFrame API（iframe内でvideoを呼び出すもの）とJavaScript API（Flashのプレーヤーを呼び出すもの）がありますが、全画面動画にする場合にiframe内のvideoの大きさを操作できなかったため、今回はJavaScriptAPIを使用しています。
タブレット・スマホ端末では、そもそも動画の自動再生はできないため、PCサイトを前提にFlashでも問題ないかと。
そしてFlashであれば（FlashPlayerがインストールされていれば）IE8でも表示できます。素晴らしいですね。
サンプルファイルの構成
| css/ | ytvideo.css | 基本的なCSSのほか、サンプルコントローラー用のスタイルも入っています。コントローラーをカスタマイズする場合はこちらを編集してください。 |
|---|---|---|
| fonts/ | * | サンプルコントローラー用のアイコンフォントです。不要な場合はフォルダごと削除してかまいません。オリジナルなので好きに使ってもらって大丈夫です。 |
| js/ | draggable/* | 動画のシークバーをドラッグ可能にするJSです。不要な場合はフォルダごと削除してかまいません。 |
| swfobject.js | 公式リファレンスでも推奨されているため、swfobjectを使って埋め込んでいます。読み込み必須。 | |
| youtube_video.js | 一番大事なJSです。読み込み必須。 | |
| sass/ | * | Sassを使っているので編集しやすいように元ファイルを入れておきました。不要な場合はフォルダごと削除してかまいません。 |
| config.rb | Sassのconfigファイルです。不要な場合はフォルダごと削除してかまいません。 | |
| index.html | DEMO用のhtmlです。 | |
サンプルの使い方
以下、手順を紹介していきます。
1. 必要なCSSとjavaScriptを読み込む
サンプル内のCSSと…
<link href="css/ytvideo.css" rel="stylesheet" media="all">jQuery、swfobject.js、youtube_video.jsを読み込みます。
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/swfobject.js"></script>
<script src="js/youtube_video.js"></script>2. 動画を表示させたい箇所に空のDIVを設置
ID名は任意でかまいません。
<div id="player"></div>3. 設置したDIVにfunctionを実行
youtubeIdは必須で記述してください。width,heightは全画面にする場合はオリジナルサイズを、設置するだけの場合は表示させたいサイズを記述してください。
$(function(){
$('#player').customvideo({
youtubeId : 'ovO8J7ytDMM', //YouTube上の動画ID
width: 1280,
height: 720
});
});これだけで「全画面」で「オリジナルコントローラー付」のYouTube動画を埋め込むことができます。
オプション一覧
今回のプラグインには以下のオプションを用意しました。
大した数ではないのですが、これらのオプションを活用し、用途にあわせていい感じにサクッと実装してしまってください！
| youtubeId | 【省略不可】埋め込む動画のYouTube上のIDを指定 |
|---|---|
| wrapperId | プレイヤー全体を囲むDIVのid名を指定 Default : ‘video_wrapper’ |
| width | 埋め込む動画のサイズ（width）を指定 Default : 640 |
| height | 埋め込む動画のサイズ（height）を指定 Default : 360 |
| fullsize | 動画を全画面で表示するかどうかを指定（true/false） Default : true |
| loop | 動画をループさせるかどうかを指定（true/false） Default : false |
| customcontrols | オリジナルのコントローラーを表示するかどうかを指定（true/false） Default : true |
| seek | シークバーを表示するかどうかを指定（true/false） Default : true |
| draggable | シークバーをマウスドラッグで操作できるようにするかどうかを指定（true/false） Default : true |
| endevent | 動再生後にREPEAT画面を出すかどうかを指定（true/false） ※loopがtrueの場合は動作しません Default : true |
| autoplay | 読み込み完了次第すぐに再生するかどうかを指定（1:再生する/0:再生しない） Default : 1 |
動画内の広告を非表示にする
サイトに動画を埋め込む場合、見せ方によっては広告は不要ですよね。再生前に挿入される広告や画面下から出てくる広告の消し方については、以下の記事で紹介されておりました！
- YouTubeにアップロードした動画の広告を非表示にする方法 – blog.bouze.me
ただし、広告を消すことができるのは「動画をアップロードしたユーザ」ですので、YouTube上で拾ってきた動画を紹介するなどの場合、埋め込み側で広告を消すことはできないようです。
おわりに
サーバに動画をアップするとそれだけでけっこうな容量がありますし、長い動画ですとローディングに時間がかかりすぎ、とてもじゃないですが閲覧に耐えられません。
今回DEMOを作りながら、わざと1時間半くらいの動画を埋め込んでみたりしましたが、この方法ならとにかく軽いです。感動的。
（video埋め込みでは1時間半の動画なんて恐ろしくてアップできません…。）
なにかのお役に立てれば幸いです！では(＾ω＾)
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
