From bd0471c26724c49b146db685f2f60b102bd59d0b Mon Sep 17 00:00:00 2001
From: Wesley Luyten <me@wesleyluyten.com>
Date: Fri, 19 Apr 2024 20:54:55 -0500
Subject: [PATCH] fix: sizing issue w/ bg video which made the (#244)

blur image not show before either img or video got
dimensions via their url sources
---
 examples/default-provider/app/background-video/page.tsx | 6 +++++-
 examples/default-provider/app/globals.css               | 2 +-
 src/components/players/background-player.tsx            | 2 ++
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/examples/default-provider/app/background-video/page.tsx b/examples/default-provider/app/background-video/page.tsx
index 48d2688..10e8bbb 100644
--- a/examples/default-provider/app/background-video/page.tsx
+++ b/examples/default-provider/app/background-video/page.tsx
@@ -10,7 +10,11 @@ export default function Page() {
   return (
     <>
       <section>
-        <BackgroundVideo src={countryClouds} disableTracking>
+        <BackgroundVideo
+          src={countryClouds}
+          disableTracking
+          style={{ aspectRatio: 1.9 }}
+        >
           <h1>next-video</h1>
           <p>
             A React component for adding video to your Next.js application.
diff --git a/examples/default-provider/app/globals.css b/examples/default-provider/app/globals.css
index 57dbdfe..a88418e 100644
--- a/examples/default-provider/app/globals.css
+++ b/examples/default-provider/app/globals.css
@@ -143,7 +143,7 @@ footer .inner {
 }
 
 .mux-svg {
-  width: 2.2rem;
+  width: 2.5rem;
 }
 
 aside nav ul {
diff --git a/src/components/players/background-player.tsx b/src/components/players/background-player.tsx
index eff47aa..bf65a86 100644
--- a/src/components/players/background-player.tsx
+++ b/src/components/players/background-player.tsx
@@ -87,6 +87,8 @@ export const BackgroundPlayer = forwardRef((allProps: BackgroundPlayerProps, for
         }
 
         .next-video-bg-poster {
+          width: 100%;
+          height: 100%;
           position: relative;
           object-fit: cover;
           pointer-events: none;