YouTube動画コンテンツの埋め込みをしよう【実践編・YouTubeAPIを使ってプラグインを作ってみた】

ぺちこ

2014.10.30

こんにちは、デザイナーのぺちこです。

さて、前回「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動画を埋め込むことができます。

DEMOを見る

オプション一覧

今回のプラグインには以下のオプションを用意しました。
大した数ではないのですが、これらのオプションを活用し、用途にあわせていい感じにサクッと実装してしまってください！

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