Video Background Not Showing in Instagram In-App Browser (WP + Elementor)?

I’m using WordPress for my Website (Demo) with Elementor and have set a self-hosted .webm video (https url and on same site media library) as a background for a container.

I also added a black background for fallback. When I open the page via a link in an Instagram bio (Instagram Username : onur.testaccount), the site displays normally except for the video background – only the black background shows up on iOS Instagram Mobile App.

Using an .mp4 file makes it worse on mobile (iOS): aside from a larger file size on first load, the video initially appears as a small HTML video box, then expands to fill 100% of the viewport a split second later. The .webm file shows up in the correct size immediately and has a much smaller file size.

So, it doesn’t seem to be an issue with .webm or .mp4, and might be related to Instagram’s browser. Another website that uses an Elementor container video background works fine in Instagram’s browser, so I’m not sure why mine isn’t working.

Does anyone have suggestions or a workaround for this or am i allow to post the site url & instagram name?

Tried using webm / mp4 and asked on gutefrage.net / reddit communities.
Tried asking ChatGPT and on my own.
No Dev Tools in Instagram In-App Browser so iam limited.
Inspected what the other website that is using the same tools did differnt

As you can see its an normal Elementor Container – Section with 85vh Height and 100% Witdh

<div class="elementor-element elementor-element-9ada346 e-con-full e-flex e-con e-parent e-lazyloaded" data-id="9ada346" data-element_type="container" data-settings="{&quot;background_background&quot;:&quot;video&quot;,&quot;background_video_link&quot;:&quot;https://onurzengin.de/wp-content/uploads/2024/10/Startseite_Video_Hintergrund.webm&quot;,&quot;background_play_on_mobile&quot;:&quot;yes&quot;}">
        <div class="elementor-background-video-container">
                            <video class="elementor-background-video-hosted elementor-html5-video" autoplay="" muted="" playsinline="" loop="" src="https://onurzengin.de/wp-content/uploads/2024/10/Startseite_Video_Hintergrund.webm" style="width: 1400.78px; height: 787.938px;"></video>
                    </div>      <div class="elementor-element elementor-element-6eaa309 elementor-widget elementor-widget-heading" data-id="6eaa309" data-element_type="widget" data-settings="{&quot;_animation&quot;:&quot;none&quot;}" data-widget_type="heading.default">
                <div class="elementor-widget-container">
            <h2 class="elementor-heading-title elementor-size-default">Get Fit Finally, <span style="color:red">Don't Hesitate </span>Again!</h2>       </div>
                </div>
                <div class="elementor-element elementor-element-a06c4ca elementor-widget elementor-widget-text-editor animated fadeInUp" data-id="a06c4ca" data-element_type="widget" data-settings="{&quot;_animation&quot;:&quot;fadeInUp&quot;}" data-widget_type="text-editor.default">
                <div class="elementor-widget-container">
                            <span style="text-decoration: line-through; color: red;">Excuses. Costs. Bindings.</span><br>
1 MONTH MMA TRIAL <br>
Start now &amp; thank yourself in a year.                       </div>
                </div>
                </div>