Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

Dynamic media not loading videos when an external script is used in the page

Avatar

Level 6

I've this dynamic media component in page. When I try to add a video to it, it remains blank(Refer screenshot below, I've dropped a video to the dynamic media, but it's not visible in the UI, but the data is getting added to the nodes properly).

 

Screenshot (32).png

 

But when I instead add an image to it, it's working fine.


Screenshot (30).png

 

No errors observed in either browser console/sling logs.

I did some debugging around this and found one external script was causing the issue. It was a Usersnap script which adds a feedback button to the page.

 

window.onUsersnapLoad = function(api) {
  api.init();
}
var script = document.createElement('script');
script.defer = 1;
script.src='https://api.usersnap.com/load/YOUR-API-KEY.js?onload=onUsersnapLoad';
document.getElementsByTagName('head')[0].appendChild(script);

 

 

 

The dynamic media started functioning normal when this script was removed from the page. But was not able to figure out why this is happening. Could someone help me with this? Thanks!

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Reply

Avatar

Community Advisor

Hi @jezwn 

 

Can you load the script on the <head> section of your page component and see if it resolves the issue. I feel like the issue is with the defer tag and it's not allowing to render the content.

 

Thanks!