How to Add Video Popups and Infinite Loading to Elementor Post Modules

Elementor is an incredibly flexible page builder, but sometimes the default “Posts” widget needs a little extra functionality to truly shine. In this guide, we’ll walk through how to add two powerful features to an Elementor post list: video popups (using Magnific Popup) and infinite loading (using Infinite Ajax Scroll).

The best part about this implementation is that it relies purely on existing WordPress hooks and filters. We won’t be modifying any core WordPress or Elementor files, meaning your site will remain fully updateable and compatible.

1. Enqueuing the Required JavaScript Libraries

To power these effects, we need to load two external libraries: jquery-ias for the infinite scroll and magnific-popup for the video lightbox. We’ll use the wp_enqueue_scripts action to register and then conditionally load these scripts only on the page where our post list resides (replace 178 with your actual page ID).

add_action('wp_enqueue_scripts', function ()
{
    // Register the libraries
    wp_register_script('wprs-jquery-ias', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-ias/2.2.2/jquery-ias.min.js', ['jquery'], '2.2.2', true);
    wp_register_style('wprs-magnific-popup', 'https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css');
    wp_register_script('wprs-magnific-popup', 'https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js', ['jquery'], '1.1.0', true);

    // Conditionally load on specific pages
    if (is_page(178)) {
        wp_enqueue_script('wprs-jquery-ias');
        wp_enqueue_style('wprs-magnific-popup');
        wp_enqueue_script('wprs-magnific-popup');
    }
});

Next, we need to write the initialization logic. We’ll hook into wp_footer to print our custom script. This script handles the infinite scroll container and ensures that the video popup functionality is re-applied every time a new batch of posts is loaded asynchronously.

add_action('wp_footer', function ()
{
    if ( ! is_page(178)) {
        return;
    }
    ?>
    <script>
        jQuery(document).ready(function($) {
            function activatePopup() {
                // Target the Elementor post thumbnail link
                $('#feedback-videos .elementor-post__thumbnail__link').magnificPopup({
                    disableOn   : 700,
                    type        : 'iframe',
                    mainClass   : 'mfp-fade',
                    removalDelay: 160,
                    preloader   : false,
                    fixedContentPos: false,
                });
            }

            activatePopup();

            var ias = jQuery.ias({
                container : '.elementor-posts-container',
                item      : 'article.elementor-post',
                pagination: 'nav.elementor-pagination',
                next      : 'nav.elementor-pagination a.next',
            });

            // Add IAS extensions for a smoother experience
            ias.extension(new IASSpinnerExtension());
            ias.extension(new IASTriggerExtension({offset: 2}));
            ias.extension(new IASNoneLeftExtension({text: 'You reached the end'}));
            ias.extension(new IASPagingExtension({text: 'View More Videos'}));
            ias.extension(new IASHistoryExtension({prev: '#pagination a.prev'}));

            // Re-activate popups when new items are rendered
            ias.on('rendered', function(items) {
                activatePopup();
            });
        });
    </script>
<?php });

3. Redirecting Post Links to Video URLs

Magnific Popup uses the href attribute of a link to determine what to show in the lightbox. To make this work, we need to change the standard post permalink to the URL of the video. We can achieve this using the post_type_link filter, assuming your video URLs are stored in a custom field (e.g., _video_url).

add_filter('post_type_link', function ($permalink, $post, $leavename)
{
    // Apply only to a specific custom post type if necessary
    if ($post->post_type === 'feedback') {
        $video_url = get_post_meta($post->ID, '_video_url', true);

        if ($video_url) {
            $permalink = $video_url;
        }
    }

    return $permalink;
}, 999, 3);

By following these three steps, you’ve transformed a static Elementor post list into a dynamic, interactive media gallery. This method is clean, performant, and avoids bloat by only loading assets when and where they are needed.