Html 如何制作div和svg的视频背景？

我试图让这个视频成为div和svg的背景，就像这张图片一样

我试着：

<section id="home" style="position: relative;background: #1d5867b5;">
        <div class="py-5">
            <div class="d-flex p-5 flex-column ">
                <span style="max-width: 110ch;">
                    <h1 class="display-3 font-weight-bold mb-4 text-white" style="margin: 0px;">Propagando conhecimento que transforma através da Educação Online.</h1>

                </span>

                <button class="btn btn-warning font-weight-bold text-info w-25 p-2" type="button">
                    <span>CONHEÇA O QUE FAZEMOS</span>

                    <i class=""></i>

                </button>

            </div>

        </div>

        <video class="home-video" src="https://www.youni.com.br/img/video.mp4" width="100%" height="100%"></video>

</section>
<svg viewBox="0 50 500 80" style="position: relative; margin-top: -100px;">
  <path class="wave-color1" d="M0.00,92.27 C216.83,192.92 304.30,8.39 500.00,109.03 L500.00,0.00 L0.00,0.00 Z" stroke="none"></path>
</svg>

我以前做过 您需要使用html5视频标签，并将整个div设置为固定位置，z索引值小于同一部分中的任何其他div

下面是一个例子

<video preload="" muted="" poster="URL.jpg" autoplay="" loop="" width="100%">

            <source src="URL.mp4" type="video/mp4">

            <source src="URL.ogv" type="video/ogv">

            <source src="URL.webm" type="video/webm">

        </video>

}

---

并确保主div设置为overflow:hidden

你能添加你的代码吗？到目前为止您都尝试了什么？嗨，欢迎来到Stack Overflow！请尽快熟悉该网站并发布一篇文章，以便我们能够帮助您解决问题。请提供一个带有代码的解决方案，而不是指向其他网站的链接。

video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background-size: cover;