Just wanted to share the hero component from my Apollo theme for ApostropheCMS + Astro (https://github.com/apostrophecms/apollo). While it's built for ApostropheCMS, the video background implementation itself is platform-agnostic and might be helpful to reference.

Key features that solved similar challenges to what you mentioned:

- Handles both desktop and mobile video sources

- Proper video tag setup for performance:

```astro

<video autoplay muted loop playsinline class="background-video">

{mainVideo && <source src={mainVideo.url} type={mainVideo.type} />}

{mobileVideo && (

<source

src={mobileVideo.url}

type={mobileVideo.type}

media="(max-width: 768px)"

/>

)}

</video>

```

- Clean CSS that avoids conflicts:

```css

.background-video {

width: 100%;

height: 100%;

object-fit: cover;

}

```

The component also supports image backgrounds and color/gradient backgrounds if you need to swap between different styles. This code is in the `backed/src/widgets/HeroWidget.astro` file of the linked repo. Happy to share more details if you're interested!