Youtubeをポップアップで表示

YouTubeを埋め込みではなく、ポップアップ式に、かつ、レスポンシブ対応にする場合、jQueryプラグインを利用することが多いが、ライセンスがMIT以外では違反の不安要素がある。

以下のプラグインはMITライセンスなので、ある程度の使用制限が楽になる。

magnific popup

Youtubeのurlはwww.youtube.com/watch?v=○○○○○○○○○○式でhrefにいれること

// script
<link rel="stylesheet" type="text/css" href="./js/popup/dist/magnific-popup.css">
<script src="./js/popup/dist/jquery.magnific-popup.js"></script>
<script>
	$(function(){
		$("a.youtube").magnificPopup({
			disableOn: 700,
			type: 'iframe',
			mainClass: 'mfp-fade',
			removalDelay: 160,
			preloader: false,

			fixedContentPos: false,
			iframe: {
			  patterns: {
			    youtube: {
			      index: 'youtube.com/',
			      id: 'v=',
			      src: '//www.youtube.com/embed/%id%?autoplay=0&rel=0'
			    }
			  }
			}
		});
	})
</script>

// aリンク
<a href="www.youtube.com/watch?v=○○○○○○○○○○">Youtube</a>