Hey everyone,
I’ve been working on a new client portal in the Next-Gen builder and I’m hitting a bit of a snag with the UI consistency. I’m trying to include some high-definition instructional walkthroughs for our end-users directly within a “Details” view so they don’t have to leave the app to understand the workflow.
I’ve been using a specific capcut macbook version to handle all my screen recording edits and text overlays because the desktop features give me a much cleaner export for these types of tutorials. However, when I embed the resulting files into a Knack “Rich Text” block using an iFrame, the video doesn’t seem to respect the container width on mobile devices. It looks perfect on my desktop, but on a smartphone, the player overflows the column and breaks the page layout.
Has anyone found a specific CSS snippet or a jQuery workaround to make these embedded players truly fluid in the new builder? I’ve tried setting the width to 100% in the source code, but the height doesn’t scale proportionally, leading to some ugly black bars. I’m also curious if you guys are seeing any performance lag when loading multiple video-heavy records in a single grid—should I be lazy-loading these assets via JavaScript instead? I really want to keep the “Help” section looking professional, so any advice on keeping these desktop-edited clips responsive within the Knack ecosystem would be a huge help!