WordPress站点背景视频异步加载可行方案问询

我正在修改一个WordPress站点，站点头部为100vw×100vh尺寸，内嵌了一个作为背景的视频，原始代码如下：

<video preload="auto" autoplay muted loop="loop" id="header_background_video">
    <source src="<?= $header['achtergrond']['url']; ?>" type="video/mp4">
</video>

视频托管在本站服务器，但通过Google测速工具和GTmetrix测试发现，视频体积过大是核心速度瓶颈，导致站点评分极低。

已尝试以下优化方案，但均未解决问题：

• 压缩视频至模糊状态
• 转换为webm格式
• 转换为webm格式并二次压缩
• 将视频缩短至5秒（时长过短，影响视觉体验），但速度问题依旧存在

禁用autoplay属性可以提升加载速度，但会破坏头部的展示效果。经调研得知，异步加载视频可以在保留autoplay的前提下解决速度问题，但未找到无需第三方工具的有效实现教程。

我尝试了以下代码，但未能生效：

function lazy_load() { ?>
    <script>
        window.addEventListener('load', (event) => {
            footer_lazyloader();
        });


        function footer_lazyloader() {
            $(function() {
                $("video#header_background_video source").each(function() {
                    var sourceFile = $(this).attr("data-src");
                    $(this).attr("src", sourceFile);
                    var video = this.parentElement;
                    video.load();
                    video.play();
                });
            });
        }
    </script>
<?php }
add_action('wp_footer', 'lazy_load');

当前视频HTML元素代码：

<video muted loop="loop" id="header_background_video">
    <source src="<?= $header['achtergrond']['url']; ?>" type="video/mp4">
</video>

请问：是否存在可行的视频异步加载方案？

内容的提问来源于stack exchange，提问作者MathyB