Video player initially small in HTML Element – how to fix?

0
Hi everyone, I’m using the HTML Element widget in my Mendix web app to display videos. The issue is that when the video starts loading, the video player appears small for a moment, and then once the video is fully loaded, it expands to the correct size. I don’t want to use a poster image or any “Loading…” overlay — I just want the video to appear at the correct size from the beginning. Here’s what I’ve tried so far: Set the video and container CSS to width: 100% and height: 100%. Set the video background to transparent. Even with that, the initial small frame still shows for a moment. Has anyone faced this issue before? Is there a way in Mendix Web to make the video player render at the correct size immediately without relying on posters or overlays? Any CSS/JS tips or best practices would be super helpful! Thanks a lot!
asked
1 answers
0

Your explanation actually makes a lot of sense. Did you take care of the following?

In CSS, height: 100% only works if all parent elements up the DOM tree have an explicit height. In Mendix layouts (cards, DataViews, scroll containers), parents often have height: auto, so during the initial layout pass the browser can’t resolve the height. As a result, the <video> first renders at its intrinsic default size and then resizes once the layout is recalculated which is exactly the “small -> correct size” behavior. That’s why setting width: 100% / height: 100% only on the video itself isn’t sufficient unless the entire parent chain is constrained.

 

As an alternative, have you also considered the Mendix-developed Video Player widget?

answered