Also I was working on this post who was using background video and again the video aspect ratio didnt work.
myonke - Michael Yonke
came up with this brilliant solution.
I’ve run into this issue before. What I do is create the main div, set it to relative.
Then I create a square SVG in Illustrator/Figma/similar. Make sure the SVG has no fill and no border.
Take that SVG and place it into the main div and give it a width of 100% so it always fills the full width of your main div.
Then I set the main div to whatever width I need for the design, I think in your example you stated you wanted it to be 100%, so set it to that. Then the main div will now expand as a square because of your SVG image, meaning the width will be equal to height.
Now that we have the right shape of our main div, add a new div inside the main div to hold your content, set it to absolute and width/heigh set to 100%. Make it flex if you want, but either way, now you can place content into this absolute positioned div, and it will always stay as a square, or width = height.
Hope this helps. Maybe you already tried this too haha, but just wanted to drop my thoughts. If you need any help implementing this, just let me know.