Hi everyone,
I am currently troubleshooting a frustrating UI issue on a custom portal page I’ve built for our internal media department. We use this page to house resources and documentation for our pc video editing workflows, but I’ve hit a wall with how Liferay handles the rendering of external media containers.
The primary issue is that when I embed a high-bitrate video preview or a heavy media-based script within a Liferay fragment or portlet, the portal’s global AlloyUI scripts seem to cause a “race condition” during the page load. This results in the video player UI becoming unresponsive or, in some cases, the Liferay “Dockbar” at the top completely disappearing until the external media asset is fully cached. I’ve tried setting the portlet to load in an iframe to isolate the environment, but then I lose the ability to use Liferay’s built-in responsive grid system, which makes the mobile view look completely broken.
Has anyone here dealt with performance degradation or DOM conflicts when integrating resource-heavy media tools into a Liferay 7.x environment? I am also seeing a weird issue where the CSS from the external media assets is leaking into the Liferay theme and overriding the font weights in our navigation menus. If you’ve found a way to “sandbox” these types of high-demand media pages within the portal without sacrificing the theme’s integrity or the portal’s load speed, I’d really appreciate your insight on how to properly prioritize the script execution!