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自動再生のデモページ
 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2021年11月
 123456
78910111213
14151617181920
21222324252627
282930