Php Featherlight.js和WP循环

我的页面上有一堆图像，它们链接到在模式窗口中打开的视频，使用

我在Wordpress中使用一个循环来模板我的内容，但似乎所有featherlight模态都被推到文档的末尾（页脚之后）

所以即使我的代码是这样写的：

<?php foreach ( $rss_items as $item ) : ?>

    <?php // Start Loop // ?>
    <div class="col-xs-4">

        <?php // Start Modal Link // ?>
        <a class="thumb-link" data-featherlight="#video-modal">
            <img src="<?php echo $thumb; ?>" width="100%" height="auto" />
        </a>
        <?php // End Modal Link // ?>

        <?php // Start Modal Window // ?>
        <div id="video-modal" class="lightbox">
            <video controls style="width: 100%; height: auto;">
                <source src="<?php echo $video_link; ?>" type="video/mp4">
            </video>
        </div>
        <?php // End Modal Window // ?>

    </div>
    <?php // End Loop // ?>

<?php endforeach; ?>

“width=“100%”height=“auto”/>
<?php foreach ( $rss_items as $item ) : ?>

    <?php // Start Loop // ?>
    <div class="col-xs-4">

        <?php // Start Modal Link // ?>
        <a class="thumb-link" data-featherlight="#video-modal">
            <img src="<?php echo $thumb; ?>" width="100%" height="auto" />
        </a>
        <?php // End Modal Link // ?>

    </div>
    <?php // End Loop // ?>

<?php endforeach; ?>

...

<?php // Start Modal Window // ?>
    <div id="video-modal" class="lightbox">
        <video controls style="width: 100%; height: auto;">
            <source src="<?php echo $video_link; ?>" type="video/mp4">
        </video>
    </div>
<?php // End Modal Window // ?>