ColorBox.jsでimgをクリックすると動画の表示

参考サイト
cly7796.net

wisdommingle.com
kachibito.net





Colorbox.jsをダウンロードし、以下のように指定する。（動画はYoutubeの埋め込みコードより）

<!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8'/>
		<title>Colorbox Examples</title>
		<style>
			body{font:12px/1.2 Verdana, sans-serif; padding:0 10px;}
			a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
			h2{font-size:13px; margin:15px 0 0 0;}
		</style>
		<link rel="stylesheet" href="colorbox.css" /><!-- カラーボックスのcss -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="../jquery.colorbox.js"></script><!-- カラーボックスのjs -->
		<script>
			//iframe
$(function() {
	$(".youtube").colorbox({
		iframe:true,
		width:"80%",
		height:"80%",
		opacity: 0.7
	});
});
		</script>
		<style>
			

		</style>
	</head>
	<body>
		<h1>Colorbox Demonstration</h1>
		<h2>Other Content Types</h2>
		<p><a class='youtube' href="http://www.youtube.com/embed/VOJyrQa_WR4?rel=0&amp;wmode=transparent"><img src="images/youtube.png" alt=""></a></p> 
	</body>
</html>