From b4f03889da45b595d35b403049f9784dcd0c5792 Mon Sep 17 00:00:00 2001
From: Wesley Luyten <me@wesleyluyten.com>
Date: Fri, 19 Apr 2024 17:28:41 -0500
Subject: [PATCH] fix: video dimension bugs, extra spacing

---
 .../default-provider/app/background-video/page.tsx  |  4 ++--
 .../default-provider/app/custom-player/page.tsx     |  8 ++++++--
 src/components/players/background-player.tsx        | 13 +++++++------
 src/components/video.tsx                            |  5 ++---
 4 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/examples/default-provider/app/background-video/page.tsx b/examples/default-provider/app/background-video/page.tsx
index 4d47fff..48d2688 100644
--- a/examples/default-provider/app/background-video/page.tsx
+++ b/examples/default-provider/app/background-video/page.tsx
@@ -1,6 +1,6 @@
 import { Metadata } from 'next';
 import BackgroundVideo from 'next-video/background-video';
-import getStarted from '/videos/country-clouds.mp4?thumbnailTime=0';
+import countryClouds from '/videos/country-clouds.mp4?thumbnailTime=0';
 
 export const metadata: Metadata = {
   title: 'next-video - Background Video',
@@ -10,7 +10,7 @@ export default function Page() {
   return (
     <>
       <section>
-        <BackgroundVideo src={getStarted} disableTracking>
+        <BackgroundVideo src={countryClouds} disableTracking>
           <h1>next-video</h1>
           <p>
             A React component for adding video to your Next.js application.
diff --git a/examples/default-provider/app/custom-player/page.tsx b/examples/default-provider/app/custom-player/page.tsx
index 004c6de..4faac23 100644
--- a/examples/default-provider/app/custom-player/page.tsx
+++ b/examples/default-provider/app/custom-player/page.tsx
@@ -1,7 +1,7 @@
 import { Metadata } from 'next';
 import Video from 'next-video';
 import ReactPlayer from './player'
-import getStarted from '/videos/country-clouds.mp4';
+import countryClouds from '/videos/country-clouds.mp4';
 
 export const metadata: Metadata = {
   title: 'next-video - Custom Player',
@@ -11,7 +11,11 @@ export default function Page() {
   return (
     <>
       <section>
-        <Video as={ReactPlayer} src={getStarted} />
+        <Video
+          as={ReactPlayer}
+          src={countryClouds}
+          style={{ aspectRatio: 1.9 }}
+        />
       </section>
     </>
   );
diff --git a/src/components/players/background-player.tsx b/src/components/players/background-player.tsx
index c2f3c0d..eff47aa 100644
--- a/src/components/players/background-player.tsx
+++ b/src/components/players/background-player.tsx
@@ -77,24 +77,24 @@ export const BackgroundPlayer = forwardRef((allProps: BackgroundPlayerProps, for
         .next-video-bg {
           aspect-ratio: initial;
           height: 100%;
+          display: grid;
         }
 
+        .next-video-bg [data-next-video],
         .next-video-bg-poster,
         .next-video-bg-text {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
+          grid-area: 1 / 1;
         }
 
         .next-video-bg-poster {
+          position: relative;
           object-fit: cover;
           pointer-events: none;
+          transition: opacity .25s;
         }
 
         .next-video-bg-poster[hidden] {
-          display: none;
+          opacity: 0;
         }
 
         .next-video-bg [data-next-video] {
@@ -102,6 +102,7 @@ export const BackgroundPlayer = forwardRef((allProps: BackgroundPlayerProps, for
         }
 
         .next-video-bg-text {
+          position: relative;
           display: grid;
           place-content: center;
           padding: 5% 5% 10%;
diff --git a/src/components/video.tsx b/src/components/video.tsx
index 8cb7680..907791e 100644
--- a/src/components/video.tsx
+++ b/src/components/video.tsx
@@ -68,7 +68,7 @@ const NextVideo = forwardRef((props: VideoProps, forwardedRef) => {
   return (
     <div className={`${className ? `${className} ` : ''}next-video-container`} style={style}>
       <style>{
-        /* css */ `
+        /* css */`
         .next-video-container {
           position: relative;
           width: 100%;
@@ -76,11 +76,10 @@ const NextVideo = forwardRef((props: VideoProps, forwardedRef) => {
         }
 
         [data-next-video] {
+          display: block;
           position: relative;
           width: 100%;
           height: 100%;
-          display: inline-block;
-          line-height: 0;
         }
 
         [data-next-video] img {