我在横幅中点击图片时会显示YouTube视频模式。 YouTube视频已设置为自动播放,但如何在点击视频外部时停止播放YouTube视频?
HTML代码
<div class="banner-image">
<div class="banner-image-container">
<div class="image"><a href="#media-popup" data-media="//www.youtube.com/embed/qfGggAGITwg?rel=0&autoplay=1"><img src="/files/theme/images/hover.png"/></a></div>
<div class="popup" id="media-popup">
<div class="video-container">
<div class='embed-container'>
<iframe id="player" frameborder='0' allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
CSS代码
.banner-image {
height:100%;
}
.popup {
position:absolute;
z-index:9;
top:0;
left:0;
padding-top:100px;
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;
}
jQuery代码
jQuery(function($) {
$("[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(".banner-image").addClass("show-popup");
});
$(".popup").on("click", function(e) {
e.preventDefault();
e.stopPropagation();
$(".banner-image").removeClass("show-popup");
});
$(".popup > iframe").on("click", function(e) {
e.stopPropagation();
});
});
答案 0 :(得分:1)
您可以使用解决方案https://jsfiddle.net/9skjg5Lg/
jQuery(function($) {
$("[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(".banner-image").addClass("show-popup");
});
$(".popup").on("click", function(e) {
e.preventDefault();
e.stopPropagation();
var src = $(this).find('iframe').attr('src').replace('autoplay=1', 'autoplay=0');
$(this).find('iframe').attr('src', src);
//$(".banner-image").removeClass("show-popup");
});
$(".popup > iframe").on("click", function(e) {
e.stopPropagation();
});
});
.banner-image {
height:100%;
}
.popup {
position:absolute;
z-index:9;
top:0;
left:0;
padding-top:100px;
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="banner-image">
<div class="banner-image-container">
<div class="image"><a href="#media-popup" data-media="https://www.youtube.com/embed/qfGggAGITwg?rel=0&autoplay=1"><img src="http://via.placeholder.com/350x150"/></a></div>
<div class="popup" id="media-popup">
<div class="video-container">
<div class='embed-container'>
<iframe id="player" frameborder='0' allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
将autoplay=1
替换为autoplay=0
以停止播放视频。我在.popup
点击事件中添加了相同内容。
希望这会对你有所帮助。