我有一个很大的问题，JavaScript弹出模式窗口显示YouTube iframe视频！我已经花了一周甚至更长时间在互联网上找到解决这个问题的方法，但似乎没有太多的资源或答案和/或解决方案来解决这个问题，所以我想我应该要求你的帮助。
=============================================== ==========================
好的，我的离线网站上有一张图片，当你点击它时，它会在浏览器中弹出一个弹出模式窗口，其中包含一个iframe YouTube视频片段，当你点击它时播放的YouTube视频就像它一样应该。 到目前为止一切顺利，一切正常，直到你关闭窗口（点击视频外的任何地方或 X 按钮，像往常一样！
=============================================== ========================== =============================================== ========================== =============================================== ==========================
在这里，我为所有需要的代码创建了一个 JSFiddle 链接：https://jsfiddle.net/24A9b/13617/ 顺便说一下，这个问题发生在所有浏览器上。
这是代码，您可以在下面的jsfiddle链接中找到相同的代码：
<!-- Button that triggers the popup -->
<button id="my-button"> Play video </button>
<!-- Element to pop up -->
<div id="element_to_pop_up">
<a class="b-close"> x <a/>
<iframe width="450" height="315" src="https://www.youtube.com/embed/Ev4zBCBEELQ" frameborder="0" allowfullscreen></iframe>
</div><!-- end of element_to_pup_up id -->
#element_to_pop_up {
background-color:#fff;
border-radius:15px;
color:#000;
display:none;
padding:20px;
min-width:400px;
min-height: 180px;
}
.b-close {
cursor:pointer;
position:absolute;
right:10px;
top:5px;
}
// Semicolon (;) to ensure closing of earlier scripting
// Encapsulation
// $ is assigned to jQuery
;
(function ($) {
// DOM Ready
$(function () {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#my-button').bind('click', function (e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#element_to_pop_up').bPopup();
});
});
})(jQuery);
(function (b) {
b.fn.bPopup = function (z, F) {
function K() {
a.contentContainer = b(a.contentContainer || c);
switch (a.content) {
case "iframe":
var h = b('<iframe class="b-iframe" ' + a.iframeAttr + "></iframe>");
h.appendTo(a.contentContainer);
r = c.outerHeight(!0);
s = c.outerWidth(!0);
A();
h.attr("src", a.loadUrl);
k(a.loadCallback);
break;
case "image":
A();
b("<img />").load(function () {
k(a.loadCallback);
G(b(this))
}).attr("src", a.loadUrl).hide().appendTo(a.contentContainer);
break;
default:
A(), b('<div class="b-ajax-wrapper"></div>').load(a.loadUrl, a.loadData, function () {
k(a.loadCallback);
G(b(this))
}).hide().appendTo(a.contentContainer)
}
}
function A() {
a.modal && b('<div class="b-modal ' + e + '"></div>').css({
backgroundColor: a.modalColor,
position: "fixed",
top: 0,
right: 0,
bottom: 0,
left: 0,
opacity: 0,
zIndex: a.zIndex + t
}).appendTo(a.appendTo).fadeTo(a.speed, a.opacity);
D();
c.data("bPopup", a).data("id", e).css({
left: "slideIn" == a.transition || "slideBack" == a.transition ? "slideBack" == a.transition ? g.scrollLeft() + u : -1 * (v + s) : l(!(!a.follow[0] && m || f)),
position: a.positionStyle || "absolute",
top: "slideDown" == a.transition || "slideUp" == a.transition ? "slideUp" == a.transition ? g.scrollTop() + w : x + -1 * r : n(!(!a.follow[1] && p || f)),
"z-index": a.zIndex + t + 1
}).each(function () {
a.appending && b(this).appendTo(a.appendTo)
});
H(!0)
}
function q() {
a.modal && b(".b-modal." + c.data("id")).fadeTo(a.speed, 0, function () {
b(this).remove()
});
a.scrollBar || b("html").css("overflow", "auto");
b(".b-modal." + e).unbind("click");
g.unbind("keydown." + e);
d.unbind("." + e).data("bPopup", 0 < d.data("bPopup") - 1 ? d.data("bPopup") - 1 : null);
c.undelegate(".bClose, ." + a.closeClass, "click." + e, q).data("bPopup", null);
H();
return !1
}
function G(h) {
var b = h.width(),
e = h.height(),
d = {};
a.contentContainer.css({
height: e,
width: b
});
e >= c.height() && (d.height = c.height());
b >= c.width() && (d.width = c.width());
r = c.outerHeight(!0);
s = c.outerWidth(!0);
D();
a.contentContainer.css({
height: "auto",
width: "auto"
});
d.left = l(!(!a.follow[0] && m || f));
d.top = n(!(!a.follow[1] && p || f));
c.animate(d, 250, function () {
h.show();
B = E()
})
}
function L() {
d.data("bPopup", t);
c.delegate(".bClose, ." + a.closeClass, "click." + e, q);
a.modalClose && b(".b-modal." + e).css("cursor", "pointer").bind("click", q);
M || !a.follow[0] && !a.follow[1] || d.bind("scroll." + e, function () {
B && c.dequeue().animate({
left: a.follow[0] ? l(!f) : "auto",
top: a.follow[1] ? n(!f) : "auto"
}, a.followSpeed, a.followEasing)
}).bind("resize." + e, function () {
w = y.innerHeight || d.height();
u = y.innerWidth || d.width();
if (B = E()) clearTimeout(I), I = setTimeout(function () {
D();
c.dequeue().each(function () {
f ? b(this).css({
left: v,
top: x
}) : b(this).animate({
left: a.follow[0] ? l(!0) : "auto",
top: a.follow[1] ? n(!0) : "auto"
}, a.followSpeed, a.followEasing)
})
}, 50)
});
a.escClose && g.bind("keydown." + e, function (a) {
27 == a.which && q()
})
}
function H(b) {
function d(e) {
c.css({
display: "block",
opacity: 1
}).animate(e, a.speed, a.easing, function () {
J(b)
})
}
switch (b ? a.transition : a.transitionClose || a.transition) {
case "slideIn":
d({
left: b ? l(!(!a.follow[0] && m || f)) : g.scrollLeft() - (s || c.outerWidth(!0)) - C
});
break;
case "slideBack":
d({
left: b ? l(!(!a.follow[0] && m || f)) : g.scrollLeft() + u + C
});
break;
case "slideDown":
d({
top: b ? n(!(!a.follow[1] && p || f)) : g.scrollTop() - (r || c.outerHeight(!0)) - C
});
break;
case "slideUp":
d({
top: b ? n(!(!a.follow[1] && p || f)) : g.scrollTop() + w + C
});
break;
default:
c.stop().fadeTo(a.speed, b ? 1 : 0, function () {
J(b)
})
}
}
function J(b) {
b ? (L(), k(F), a.autoClose && setTimeout(q, a.autoClose)) : (c.hide(), k(a.onClose), a.loadUrl && (a.contentContainer.empty(), c.css({
height: "auto",
width: "auto"
})))
}
function l(a) {
return a ? v + g.scrollLeft() : v
}
function n(a) {
return a ? x + g.scrollTop() : x
}
function k(a) {
b.isFunction(a) && a.call(c)
}
function D() {
x = p ? a.position[1] : Math.max(0, (w - c.outerHeight(!0)) / 2 - a.amsl);
v = m ? a.position[0] : (u - c.outerWidth(!0)) / 2;
B = E()
}
function E() {
return w > c.outerHeight(!0) && u > c.outerWidth(!0)
}
b.isFunction(z) && (F = z, z = null);
var a = b.extend({}, b.fn.bPopup.defaults, z);
a.scrollBar || b("html").css("overflow", "hidden");
var c = this,
g = b(document),
y = window,
d = b(y),
w = y.innerHeight || d.height(),
u = y.innerWidth || d.width(),
M = /OS 6(_\d)+/i.test(navigator.userAgent),
C = 200,
t = 0,
e, B, p, m, f, x, v, r, s, I;
c.close = function () {
a = this.data("bPopup");
e = "__b-popup" + d.data("bPopup") + "__";
q()
};
return c.each(function () {
b(this).data("bPopup") || (k(a.onOpen), t = (d.data("bPopup") || 0) + 1, e = "__b-popup" + t + "__", p = "auto" !== a.position[1], m = "auto" !== a.position[0], f = "fixed" === a.positionStyle, r = c.outerHeight(!0), s = c.outerWidth(!0), a.loadUrl ? K() : A())
})
};
b.fn.bPopup.defaults = {
amsl: 50,
appending: !0,
appendTo: "body",
autoClose: !1,
closeClass: "b-close",
content: "ajax",
contentContainer: !1,
easing: "swing",
escClose: !0,
follow: [!0, !0],
followEasing: "swing",
followSpeed: 500,
iframeAttr: 'scrolling="no" frameborder="0"',
loadCallback: !1,
loadData: !1,
loadUrl: !1,
modal: !0,
modalClose: !0,
modalColor: "#000",
onClose: !1,
onOpen: !1,
opacity: 0.7,
position: ["auto", "auto"],
positionStyle: "absolute",
scrollBar: !0,
speed: 250,
transition: "fadeIn",
transitionClose: !1,
zIndex: 9997
}
})(jQuery);
答案 0 :(得分：1)
答案 1 :(得分：0)
你正在编写一个我无法理解的非常大的JS代码，只需使用这个JSFiddle：http://jsfiddle.net/v95eg4h1/
我正在使用jQuery Library（1.11.0）
$(function(){
$("#showPopup").click(function(e){
e.stopPropagation();
$(".bg").toggle();
$(".popup").toggle();
});
$(".close").click(function() {
$('.modal').hide();
$("#arsha_video").attr('src','');
var video = $("#player").attr("src");
$("#player").attr("src","");
$("#player").attr("src",video);
});
$("body").click(function(){
$(".bg").toggle();
$(".popup").hide();
var video = $("#player").attr("src");
$("#player").attr("src","");
$("#player").attr("src",video);
});
});.popup{
background-color:#E6E9F2;
position:absolute;
min-height:auto;
width:auto;
border: solid 2px #B9EAF0;
z-index: 1002;
}
.bg {
background-color:#111;
opacity: 0.65;
position:absolute;
z-index: 1000;
top:0px;
left:0px;
width:100%;
min-height:100%;
overflow:auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" id="showPopup">CLICK</a>
<div class="bg" style="display:none"></div>
<div class="popup" style="display:none">
<a class=".close"> x <a/>
<iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/Ev4zBCBEELQ" frameborder="0" allowfullscreen></iframe>
</div>
答案 2 :(得分：0)
如果您不介意更改方法，则可以尝试 colorbox 。它具有响应式设计和易于实现的弹出窗口非常好。 youtubevideo in iframe
答案 3 :(得分：0)
我遇到了同样的问题。以下是我如何解决这个问题：
https://jsfiddle.net/24A9b/14789/
<强> HTML：
<!-- Button that triggers the popup -->
<button id="my-button"> Play video </button>
<!-- Element to pop up -->
<div id="element_to_pop_up" data-iframe-code="<iframe width='450' height='315' src='https://www.youtube.com/embed/Ev4zBCBEELQ' frameborder='0' allowfullscreen></iframe>">
<a class="b-close"> x <a/>
</div><!-- end of element_to_pop_up id -->
我改变了什么：
JS（只是bPopup位）：
// Triggering bPopup when click event is fired
$('#element_to_pop_up').bPopup({
onOpen: function(){
$(this).append( $( $(this).data('iframe-code') ) );
},
onClose:function(){
$(this).find('iframe').remove();
}
});
我改变了什么：