我单击图像,弹出窗口工作正常。但是,当我在弹出窗口之外单击时,iframe allowfullscreen和frameborder属性将被删除。我再次单击弹出窗口,然后全屏工作,并且出现白线。我希望弹出窗口在关闭后停止播放视频,并让iframe恢复为没有src并保留其属性。
我试过了:
的HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/css/portfolio.css" type="text/css">
</head>
<body>
<div class="page">
<a href="#media-popup" data-media="//www.youtube.com/embed/videoID"><img src="" width="100" height="100"></a>
<a href="#media-popup" data-media="//www.youtube.com/embed/videoID"><img src="" width="100" height="100"></a>
<div class="popup" id="media-popup">
<iframe width="560" height="315" src="" frameborder="0" allowfullscreen="1"></iframe>
</div>
</div>
<script src="/javascript/portfolio.js">
</script>
$("[data-media]").on("click", function(e) {
e.preventDefault();
var $this = $(this);
var videoUrl = $this.attr("data-media");
videoUrl += "?autoplay=1";
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();
//$("#media-popup").html('<iframe width="560" height="315" src="" frameborder="0" allowfullscreen="1"></iframe>');
$(".page").removeClass("show-popup");
});
$(".popup > iframe").on("click", function(e) {
e.stopPropagation();
});
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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/css/portfolio.css" type="text/css">
</head>
<body>
<style src="/css/portfolio.css">
</style>
<div class="page">
<a href="#media-popup" data-media="//www.youtube.com/embed/videoID"><img src="" width="100" height="100"></a>
<a href="#media-popup" data-media="//www.youtube.com/embed/videoID"><img src="" width="100" height="100"></a>
<div class="popup" id="media-popup">
<iframe width="560" height="315" src="" frameborder="0" allowfullscreen="1"></iframe>
</div>
</div>
<script src="/javascript/portfolio.js">
</script>
</body>
</html>
</body>
</html>
的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;
}
Javascript / jQuery
$("[data-media]").on("click", function(e) {
e.preventDefault();
var $this = $(this);
var videoUrl = $this.attr("data-media");
videoUrl += "?autoplay=1";
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();
//$("#media-popup").html('<iframe width="560" height="315" src="" frameborder="0" allowfullscreen="1"></iframe>');
$(".page").removeClass("show-popup");
});
$(".popup > iframe").on("click", function(e) {
e.stopPropagation();
});
那是jQuery。需要onLoad。
$(document).ready(function() {
var $popupIframe;
$("[data-media]").on("click", function(e) {
e.preventDefault();
var $this = $(this);
var videoUrl = $this.attr("data-media");
videoUrl += "?autoplay=1";
var popup = $this.attr("href");
$popupIframe = $(popup).find("iframe");
$popupIframe.attr("src", videoUrl);
$this.closest(".page").addClass("show-popup");
});
$(".popup").on("click", function(e) {
e.preventDefault();
e.stopPropagation();
//$("#media-popup").html('<iframe width="560" height="315" src="" frameborder="0" allowfullscreen="1"></iframe>');
$(".page").removeClass("show-popup");
$popupIframe.attr('src', '');
});
$(".popup > iframe").on("click", function(e) {
e.stopPropagation();
});
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句