我正在使用这个功能通过Magnific Popup在灯箱中显示YouTube视频。我得到的是 id
的 .video-youtube
链接,以创建一个动态的 iframe
为任何链接。
在这个页面中,我有3个不同的链接,问题是灯箱只显示最后一个视频,而不是根据点击的链接动态地改变它。任何提示都将被感激。
<a id="siTrd7uucW" class="video-youtube" href="#">Click to view video</a>
<a id="reFad8ug77" class="video-youtube" href="#">Click to view video</a>
<a id="sghrd7tu99" class="video-youtube" href="#">Click to view video</a>
(function($) {
$(document).ready(function() {
$(".video-youtube").each(function() {
var id = this.id;
$(window).load(function() {
$('.video-youtube').magnificPopup({
items: {
src: $('<iframe width="560" height="315" src="https://www.youtube.com/embed/' + id + '?autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'),
type: 'inline'
}
});
});
});
});
})(jQuery);
首先是 window.load
是不必要的。你是在document.ready处理程序中运行的,所以 window.load
会已经发射了。
关于这个问题,是因为你在选择所有的 $('.video-youtube')
循环中的元素。使用 $(this)
到 只是 指的是当前实例。
(function($) {
$(function() {
$(".video-youtube").each(function() {
$(this).magnificPopup({
items: {
src: $('<iframe src="https://www.youtube.com/embed/' + this.id + '?autoplay=1" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'),
type: 'inline'
}
});
});
});
})(jQuery);