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
muxinc · Apr 20, 2024 · bd0471c · bd0471c
1 parent 6d71742
commit bd0471c
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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;