colorbox.jsでライトボックス表示後にYouTubeを自動再生する

jquery.colorbox.jsを使って、ライトボックス表示後にYouTubeを自動再生させてみます。

サンプルコード

ライトボックスのリンク先にYouTubeのembedのURLを指定します。
その際、パラメータにautoplay=1を設定します。

HTML

<a href="https://www.youtube.com/embed/i0IP777-yLg?autoplay=1" class="lightbox">ライトボックスのリンク</a>

ライトボックスで生成されるiframeにサイズを指定します。

CSS

#colorbox iframe {
	width: 560px;
	height: 315px;
}

JavaScript

$(function() {
	$('.lightbox').colorbox({
		iframe: true,
		innerWidth: 560,
		innerHeight: 315,
		scrolling: false
	});
});

ライトボックス表示後にYouTube自動再生のデモページ