用于在wordpress页面上显示youtube视频的壮观弹出窗口

Question

我正在使用此功能通过Magnific Popup在灯箱中显示youtube视频

  function custom_magnificpopup(){
    ?>
<script>
(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);
</script>
<?php
}
add_action('wp_footer', 'custom_magnificpopup');

在页面上，我有这样的html代码：

<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>

基本上，我会获得video-youtube链接类的ID，以便为任何链接创建动态iframe。在此页面中，我有3个不同的链接，问题是灯箱打开并仅显示最后一个视频，而不是根据链接的点击动态地更改它。

任何提示将不胜感激。谢谢。

Answer 1

首先，window.load不是必需的。您正在document.ready处理程序中运行，因此window.load已被触发。