Javascript 弹出窗口在iframe内显示youtube视频

请帮我实现这个功能

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

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

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


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

标题

顺便说一句，对不起，我的英语（） 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>

<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>

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'>");
});

$（“.popup”）。单击（函数（）{
var$this=$（this）；
var$iframe=$（“”）attr（“src”），$this.data（“link”）.css（{“宽度”：400，“高度”：300}）；
var$title=$（“”）.text（$this.data（“title”）；
$（“#视频视图”）.html（$title）.append（$iframe）；
$iframe.wrap（“”）；
});

JSFiddle

---

在@Eregec answer上展开，使视频显示在弹出窗口中

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>

<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>

JS

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;
}

$("[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();
});

---

我建议你重新思考你的问题。现在还不清楚您想要什么样的窗口（id=“view popup”）来加载动态数据我相信fancybox的iframe功能就是您想要的for@Ergec谢谢，但我有自己的弹出窗口。还有很多“垃圾”都是一样的，然后我修改！谢谢这个怎么包装？使用.append？你是说是的，我需要更新我的answerJS fiddle结果。它可能不起作用，因为你使用的是广告拦截器。当我尝试在浏览器中使用它时，我会出错，但小提琴正在工作。