Ajax load

This is great, works perfect. Thank you!

Your plugins are really useful. Looking forward to try Content Blocks Builder.

I thought the fix was working, but it isn’t. I had worked on some js code that finally fixed it. It was probably still in browser cache when I tested your latest version.

I used an LLM to help, since this is way out of my league.

The plugin’s frontend.js (loaded as boldblocks-youtube-block-view-script-js) is an IIFE that runs once on page load. It scans the DOM for [data-video-id] elements and initializes each one into a playable YouTube block. When AJAX pagination (Query Loop, etc.) injects new posts into the DOM after that initial scan, the new YouTube blocks are never initialized — they stay as inert thumbnails.

A standalone script that watches for new YouTube blocks being added to the DOM and re-injects frontend.js so its IIFE re-runs and picks up the newcomers:

1. Grab the original script URL from the existing <script id="boldblocks-youtube-block-view-script-js"> tag, preserving WordPress’s ?ver= cache-buster.
2. Watch the DOM with a MutationObserver for any newly-added element matching [data-video-id]:not([data-byeb-ready]), or containing one.
3. When new blocks appear, remove any previous re-injection (#byeb-reinit) and append a fresh <script> pointing at the same URL with &reinit=<timestamp> to defeat caching. Preserve defer and data-wp-strategy="defer" so loading semantics match the original.
4. Debounce with requestAnimationFrame so a batch of mutations (e.g., 10 posts inserted at once) triggers only one re-injection per frame.
5. No jQuery, no event hooks — the observer alone covers AJAX pagination, fetch()-driven loads, and any other DOM-insertion path.

Here is the js code:

(function() {
var SCRIPT_URL = null;
var scheduled = false;

function getScriptUrl() {
    if (SCRIPT_URL) return SCRIPT_URL;
    var original = document.getElementById('boldblocks-youtube-block-view-script-js');
    if (original && original.src) SCRIPT_URL = original.src;
    return SCRIPT_URL;
}

function reinit() {
    // Coalesce multiple rapid mutations into a single re-injection per frame
    if (scheduled) return;
    scheduled = true;

    requestAnimationFrame(function() {
        scheduled = false;

        var url = getScriptUrl();
        if (!url) return;

        var old = document.getElementById('byeb-reinit');
        if (old) old.remove();

        var s = document.createElement('script');
        s.id = 'byeb-reinit';
        s.src = url + '&reinit=' + Date.now();
        s.defer = true;
        s.setAttribute('data-wp-strategy', 'defer');
        document.body.appendChild(s);
    });
}

new MutationObserver(function(mutations) {
    for (var i = 0; i < mutations.length; i++) {
        var nodes = mutations[i].addedNodes;
        for (var j = 0; j < nodes.length; j++) {
            var n = nodes[j];
            if (n.nodeType !== 1) continue;
            if (
                (n.matches && n.matches('[data-video-id]:not([data-byeb-ready])')) ||
                (n.querySelector && n.querySelector('[data-video-id]:not([data-byeb-ready])'))
            ) {
                reinit();
                return;
            }
        }
    }
}).observe(document.body, { childList: true, subtree: true });

})();