fix: Safari top/bottom border bug (#323)

muxinc · Dec 20, 2024 · d60d080 · d60d080
1 parent 439d96a
commit d60d080
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/src/components/players/default-player.tsx b/src/components/players/default-player.tsx
@@ -68,7 +68,7 @@ const DefaultPlayer = forwardRef<HTMLVideoElement, Omit<MediaProps, 'ref'> & Pla
     const showCustomBlur = isCustomPoster && blurDataURL !== asset?.blurDataURL;
 
     if (showGeneratedBlur || showCustomBlur) {
-      imgStyleProps.gridArea = '1 / 1';
+      imgStyleProps.gridArea = '1/1';
       imgStyleProps.width = '100%';
       imgStyleProps.height = '100%';
       imgStyleProps.color = 'transparent';
@@ -112,7 +112,7 @@ const DefaultPlayer = forwardRef<HTMLVideoElement, Omit<MediaProps, 'ref'> & Pla
             suppressHydrationWarning
             ref={forwardedRef}
             style={{
-              gridArea: '1 / 1',
+              gridArea: '1/1',
             }}
             slot="media"
             poster={poster}
@@ -140,7 +140,7 @@ const DefaultPlayer = forwardRef<HTMLVideoElement, Omit<MediaProps, 'ref'> & Pla
         suppressHydrationWarning
         ref={forwardedRef}
         style={{
-          gridArea: '1 / 1',
+          gridArea: '1/1',
           ...style,
         }}
         controls={controls === false ? undefined : true}

diff --git a/src/components/video.tsx b/src/components/video.tsx
@@ -70,6 +70,7 @@ const NextVideo = forwardRef<HTMLVideoElement, VideoProps>((props, forwardedRef)
       <style>{
         /* css */`
         .next-video-container {
+          display: grid;  /* Fixes a Safari aspect-ratio + height bug. */
           position: relative;
           width: 100%;
           aspect-ratio: 16 / 9;