Responsive iframe background not working in Safari - css

Question

I am trying to create a responsive background video effect that mimics a background-size: cover; background image. I have it working quite well in Chrome and Firefox, but the video refuses take up the full height of the div in mobile breakpoints in Safari.
Background video in Chrome:
Background video in Safari:
A couple of restrictions:
I am working within a CMS, so the height of the div must be dynamic
based on the content - I cannot use a set height.
Unfortunately, I
also must use an iframe to display a video from Vimeo - I cannot use
an HTML5 video element.
Here is the code I have so far...
HTML
<div class="wrapper">
<div class="background">
<iframe class="video" data-video-type="vimeo" src="https://player.vimeo.com/video/298885097?background=1&muted=1&autoplay=1&loop=1&dnt=1&api=1"> </iframe>
</div>
<div class="inner-wrapper">
<div class="content">
<h1>Lorem Ipsum</h1>
<p>Aliquam et euismod nisi. Morbi congue eu lorem sit amet vestibulum. Suspendisse tristique arcu eu pulvinar finibus. Donec convallis justo ut orci finibus posuere. Cras eleifend, dolor vel dignissim porta, nibh orci cursus magna, vel consequat neque massa sit amet urna. Duis dignissim semper elit, at dictum nulla condimentum gravida. Fusce tincidunt felis felis, eu scelerisque neque dapibus et. Sed nibh purus, porttitor quis ligula et, sollicitudin rhoncus orci. Donec tortor ligula, interdum quis sagittis mollis, consectetur a nulla. Morbi lobortis tortor vel ornare vulputate. Suspendisse mauris lorem, blandit ac sapien vitae, vestibulum facilisis lacus. Ut elementum magna elementum mauris dapibus, a tempus magna rutrum. Nunc in risus euismod, tincidunt velit fermentum, dictum est. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam efficitur nisi ac commodo viverra. Donec sed tempor ex.</p>
</div>
</div>
</div>
CSS
.wrapper {
background: red;
overflow: hidden;
position: relative;
}
.background {
aspect-ratio: 16/9;
left: 0;
min-height: 100%;
min-width: 100%;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.video {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
border: 0;
pointer-events: none;
}
.inner-wrapper {
display: -ms-flexbox;
display: flex;
padding: 3rem;
}
.content {
z-index: 2;
color: white;
}
I have created a CodePen to show the issue here: https://codepen.io/m-use/pen/bGMgvZz