弹出窗口在iframe中显示youtubevideo

拜托，帮我实现这个function！

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

  
 
title
   

PS抱歉我的英文=）

Answer 1

HTML

 SASS Node.js 
  

JQuery的

 $(".popup").click(function () { var $this = $(this); var $iframe = $(" 

的jsfiddle

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

Answer 2

扩展@Eregec回答以使video显示在弹出窗口中。

HTML

 
 
click me
 
  
  

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小提琴