Featherlight.js и WP Loop

У меня есть куча изображений на моей странице, которые связаны с видео, которые открываются в модальном окне, используя Featerlight.js.

Я использую цикл для шаблонирования своего контента в WordPress, но кажется, что все модальные перья света переносятся в конец документа (после нижнего колонтитула).

Так что, хотя мой код написан так:

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

Похоже, это выглядит так:

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

Очевидно, что это не идеальный вариант, так как он вытягивает только первое видео в цикле, и каждое изображение ссылается на одно и то же видео, поскольку видео не содержится в цикле. Кто-нибудь еще сталкивался с этой проблемой, или у кого-нибудь есть советы, как обойти это?