Absolute Position Help in Firefox

I’m sure I’m going about this wrong, but I have two images with absolute positioning (one left, one right) to form a mask over a video. These are set to 100% height and work fine in Chrome/Safari, but Firefox doesn’t display them. It seems to want a defined width not set to auto. Any ideas on how to go about that?

Second option was to remove the absolute position for each image, and create an absolute positioned div, and then use flexbox inside of that to set the images. This worked for Firefox and Chrome, but caused odd spacing issues in Safari:

I’m sure there is a better way to do this to achieve the same effect that works in all browsers. Any help would be greatly appreciated. Read only attached.


Here is my site Read-Only: [LINK](https://preview.webflow.com/preview/video-mask-6a532a?utm_medium=preview_link&utm_source=designer&utm_content=video-mask-6a532a&preview=1679de1646af26dc6ab66515cae6b8af&workflow=preview)

Anyone have any ideas by chance? Thank you!