Replace YouTube iframe not working when a page is loaded using AJAX

[vmanthos]

Before submitting an issue please check that you’ve completed the following steps:

• Made sure you’re on the latest version ✅
• Used the search feature to ensure that the bug hasn’t been reported before ✅

Describe the bug

The insertion of the YouTube thumbnail relies on the onload event firing:

document.addEventListener("DOMContentLoaded", function() {
    var e, t, a = document.getElementsByClassName("rll-youtube-player");
    for (t = 0; t < a.length; t++) e = document.createElement("div"), e.setAttribute("data-id", a[t].dataset.id), e.setAttribute("data-query", a[t].dataset.query), e.setAttribute("data-src", a[t].dataset.src), e.innerHTML = lazyLoadThumb(a[t].dataset.id), e.onclick = lazyLoadYoutubeIframe, a[t].appendChild(e)
});

When a page is fetched using AJAX, e.g. infinite scroll implementations, the onload event doesn't fire, and the thumbnail isn't loaded/displayed, leaving an empty space.

To Reproduce Steps to reproduce the behavior:

1. Add a YouTube video on a page.
2. Enable the Replace YouTube iframe with preview image feature
3. Load the page from step 1 into another page using AJAX.
4. The thumb won't be displayed.

Expected behavior

The replacement thumbs should be displayed regardless of how the page is fetched.

Screenshots

Additional context

Per @engahmeds3ed we can add our code inside an event so anyone will be able to trigger this again whenever they want.

Related ticket: https://secure.helpscout.net/conversation/1455058960/248012?folderId=2135277

Backlog Grooming (for WP Media dev team use only)

• [ ] Reproduce the problem
• [ ] Identify the root cause
• [ ] Scope a solution
• [ ] Estimate the effort

[engahmeds3ed]

Putting a note here, just in case we will work on this:

• If we triggered DOMContentLoaded again using the following script, the issue is resvoled

window.document.dispatchEvent(new Event("DOMContentLoaded", {
  bubbles: true,
  cancelable: true
}));

but this is a browser hack and we can't provide such solution to our customers because it may lead to other compatibility issues as this is a general event that maybe used by many other plugins/scripts.

• My proposed solution is that need to put our JS code as a callback for new JS event and trigger this event on DOMContentLoaded one then if any plugin (or just we) needs to trigger it again it will trigger this event so this callback would be called again.

[djvdorp]

Thanks for reporting, very helpful! I have just experienced and worked around a very similar problem while using Video PopUp.

[Chuvantinh]

Do you find a solution for that. we are facing a similar problem on this website https://botisscampus.kinsta.cloud/cases/surgeries/ . When I click load more post it does not show the image thumbnail of video.

thanks

[webtrainingwheels]

another case: https://secure.helpscout.net/conversation/1662695799/301502?folderId=377611 here the customer is using the Neomag theme with the Neomag Infinite Scroll Addon.

[DahmaniAdame]

Related - https://secure.helpscout.net/conversation/1956051079/357412?folderId=3864735 Avada infinite scroll when using the posts grid. Avada loads the page in full in the background, but it only adds the missing items to the posts grid. The behavior is the same as described on the issue.