I'm in the process of creating a hero background and I want to make sure that my svg divider is positioned beneath the video to seamlessly blend into the background below.
Currently, it's showing up right next to the buttons, which is not the desired placement.
This is how I'd like it to appear:
https://i.sstatic.net/lJFDN.png
Any suggestions on how to resolve this issue?
<header>
<div class="overlay"></div>
<video onloadedmetadata="this.muted = true" playsinline autoplay muted loop preload="auto">
<source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4" />
</video>
<div class="container h-100">
<div class="d-flex h-100 text-center align-items-center">
<div class="w-100 text-white">
<h1 class="display-3 text-white">Launch on time,<br />look on-trend.</h1>
<div class="mb-4">
<p class="lead px-xl-5">
Save countless hours of design and development and ship performant sites with killer looks.
</p>
</div>
<button class="btn btn-lg btn-white mx-1">Button 1</button>
<button class="btn btn-lg btn-primary-3 mx-1">Button 2</button>
</div>
<div class="divider flip-x">
<svg
width="100%"
height="96px"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
>
<path d="M0,0 C40,33 66,52 75,52 C83,52 92,33 100,0 L100,100 L0,100 L0,0 Z"></path>
</svg>
</div>
</div>
</div>
</header>
I've also shared a fiddle for reference: https://jsfiddle.net/vtb4zep5/.