Instagram 应用程序内浏览器（WP + Elementor）中未显示视频背景？

Question

我将 WordPress 与 Elementor 用于我的网站（演示），并设置了一个自托管 .webm 视频（https url 和同一网站媒体库）作为容器的背景。

我还添加了黑色背景作为后备。当我通过 Instagram 简介中的链接打开页面（Instagram 用户名：onur.testaccount）时，除了视频背景外，该网站正常显示 – iOS Instagram 移动应用程序上仅显示黑色背景。

使用 .mp4 文件会使移动设备 (iOS) 上的情况变得更糟：除了首次加载时文件大小较大之外，视频最初显示为一个小的 HTML 视频框，然后瞬间扩展以填充 100% 的视口。 .webm 文件立即以正确的大小显示，并且文件大小小得多。

所以，这似乎不是.webm或.mp4的问题，可能与Instagram的浏览器有关。另一个使用 Elementor 容器视频背景的网站在 Instagram 的浏览器中运行良好，所以我不确定为什么我的浏览器无法运行。

有人对此有建议或解决方法吗？或者我可以发布网站网址和 Instagram 名称吗？

尝试使用 webm / mp4 并在 gutefrage.net / reddit 社区上询问。 尝试询问 ChatGPT 并自行询问。 Instagram 应用内浏览器中没有开发工具，因此我受到限制。 检查使用相同工具的其他网站的不同之处

如您所见，它是一个普通的 Elementor 容器 - 具有 85vh 高度和 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>

Answer 1

这里同样的问题，经过多次测试，我发现它并没有真正出现在没有控件的自动播放视频中，甚至没有音频，并且仅在 iPhone 上出现，显然在 Android 设备上没有任何变化。我希望这是一个暂时的错误，它很快就会再次起作用，因为许多网站可能会受到此影响。

无论如何，您能否分享该网站的链接，并在后台播放工作视频？这可以帮助我们调查差异，因为我知道的所有具有自动播放视频的网站都显示相同的问题。