fancybox를 이용한 유튜브 팝업

http://fancyapps.com/fancybox/

<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.7" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.7"></script>

<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

관련 스크립트 추가가 들어가지만 media는 필수

HTML영역

<input type="text" name="youtube_link" id="youtube_link"><span class="youtube_preview_btn">미리보기</span>

<a class="video_fancybox fancybox.iframe" rel="video" href="" id="youtube_prev"></a>

js

$(".video_fancybox").fancybox({

openEffect : 'fade',

closeEffect : 'fade',

helpers : {

title : {

type : 'inside'

}

}

});

$(document).on("click",".youtube_preview_btn",function(){

if($(this).prev("input").val() == ""){

alert("경로를 입력하세요.");

}else{

$("#youtube_prev").attr("href","http://www.youtube.com/embed/"+$(this).prev("input").val());

$("#youtube_prev").trigger("click");

}

})