弹出窗口在iframe中显示youtube视频

Question

请帮我实现这个功能！

单击时，弹出容器，其中加载标题和iframe（来自Youtube的视频） 任何想法？
也许有插件？

<a id="popup" href=""></a>

<a id="popup" href=""></a>


<div id="video-view">
     <h1>title</h3>
     <iframe ... ></iframe> 
</div>

P.S。对不起我的英文=）

Answer 1

<强> HTML

<a class="popup" href="#!" data-link="http://www.youtube.com/embed/fbVD32w1oTo?enablejsapi=1" data-title="How to install SASS">SASS</a>

<a class="popup" href="#!" data-link="http://www.youtube.com/embed/Q0HFBy2BtfA?enablejsapi=1" data-title="How to install Node.js">Node.js</a>


<div id="video-view">
</div>

<强> JQuery的

$(".popup").click(function () {
    var $this = $(this);
    var $iframe = $("<iframe>").attr("src", $this.data("link")).css({"width": 400, "height": 300});
    var $title = $("<h1>").text($this.data("title"));
    $("#video-view").html($title).append($iframe);
    $iframe.wrap("<div class='class-video'>");
});

<强>的jsfiddle

http://jsfiddle.net/ergec/BrW5w/

Answer 2

扩展@Eregec回答，让视频显示在弹出窗口中。

<强> HTML

<div class="page">
    <p><a href="#media-popup" data-media="//www.youtube.com/embed/YoXa2Pl7Hk0">click me</a></p>

    <div class="popup" id="media-popup">
        <iframe width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

<强> CSS

html,
body {
    margin:0; padding:0; height:100%;
}
p {
    margin:0;
}
.page {
    position: relative;
    height:100%;
}

.popup {
    position:absolute;
    z-index:2;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    opacity:0;
    visibility:hidden;
    transition:.3s ease;
}

.show-popup .popup {
    opacity:1;
    visibility: visible;    
}

.popup > iframe {
    position:absolute;
    top:50px;
    left:50%;
    margin-left:-280px;
}

<强> JS

$("[data-media]").on("click", function(e) {
    e.preventDefault();
    var $this = $(this);
    var videoUrl = $this.attr("data-media");
    var popup = $this.attr("href");
    var $popupIframe = $(popup).find("iframe");

    $popupIframe.attr("src", videoUrl);

    $this.closest(".page").addClass("show-popup");
});

$(".popup").on("click", function(e) {
    e.preventDefault();
    e.stopPropagation();

    $(".page").removeClass("show-popup");
});

$(".popup > iframe").on("click", function(e) {
    e.stopPropagation();
});

JS Fiddle