2013年6月18日

fancyBoxでYouTubeの動画を再生する

mawatari 日記 fancyBox, JavaScript, jQuery, YouTube 0 Comments

20 interests

fancyBoxでYouTubeの動画を再生する方法を求めて、このブログの以下の記事にたどり着く方が多くいらっしゃいます。
fancyBoxで動画再生ができない場合の対応方法

上記では、おそらく問題解決に繋がらないため、こちらの記事にfancyBoxでYouTubeの動画を再生する方法をまとめておきます。
これは、2013年6月18日現在の情報です。YouTubeで、デザインの変更や、動画利用のポリシーが変更になった場合は、利用できなくなる恐れがあることを予めご留意ください。

環境

環境は以下の通りです。

ソフトウェア

ソフトウェア	バージョン
jQuery	2.0.2
fancyBox	2.1.5

fancyBoxでYouTubeの動画を再生する方法

CakePHPでPHPUnitを利用する方法をまとめた動画を素材として、見てみましょう。
PHPUnit and You – By Mark Story

再生したい動画のページを表示します。今回の例だと、URLは、 http://www.youtube.com/watch?v=QF1NZM360Ucです。
動画の下部にあるタブを「概要」から「共有」へ切り替えます。
「共有」タブの中のタブを「この動画を共有」から「埋め込みコード」へ切り替えます。
iframeは、fancyBoxで生成するので、必要ありません。srcアトリビュートの値（URL）だけを選択し、コピーします。

これで下準備は完了です。要点をあげるならば、 http://www.youtube.com/embed/のあとに、動画のIDを記述すれば良いということです。
あとは、以下のような感じで、fancyBoxのリンクを記述しましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>デモ - fancyBoxでYouTubeの動画を再生する</title>
	<link rel="stylesheet" href="assets/lib/fancybox/jquery.fancybox.css">
</head>
<body>

<div id="container">
	<a href="http://www.youtube.com/embed/QF1NZM360Uc" data-fancybox-type="iframe" class="fancybox">YouTube</a>
</div>

<script type="text/javascript" src="assets/lib/jquery-2.0.2.min.js"></script>
<script type="text/javascript" src="assets/lib/fancybox/jquery.fancybox.js"></script>
<script type="text/javascript">
	$(function(){
		$('a.fancybox').fancybox({
			autoSize: false,
			width: '90%',
			height: '90%'
		});
	});
</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>デモ - fancyBoxでYouTubeの動画を再生する</title>

</head>

<body>

<a href="http://www.youtube.com/embed/QF1NZM360Uc" data-fancybox-type="iframe" class="fancybox">YouTube</a>

</div>

$(function(){

$('a.fancybox').fancybox({

autoSize: false,

width: '90%',

height: '90%'

});

</script>

</body>

</html>

以上で完了です。
デモやソースコード一式は、以下のリンクからどうぞ。

Pocket

20 interests

fancyBoxでYouTubeの動画を再生する

環境

ソフトウェア

fancyBoxでYouTubeの動画を再生する方法

関連性の高い記事

Leave a Reply Cancel