diff --git a/src/components/VideoPlayer.tsx b/src/components/VideoPlayer.tsx
index deb97e3..56a6d45 100644
--- a/src/components/VideoPlayer.tsx
+++ b/src/components/VideoPlayer.tsx
@@ -52,7 +52,7 @@ export default function VideoPlayer({ video_url, thumbnailUrl }: Props) {
 
   return (
     <MediaPlayer
-      className="ring-media-focus aspect-video w-full overflow-hidden rounded-md bg-slate-900 font-sans text-white data-[focus]:ring-4"
+      className="ring-media-focus aspect-video w-full overflow-hidden rounded-md bg-black font-sans text-white data-[focus]:ring-4"
       title="Sprite Fight"
       src={[
         {
diff --git a/src/pages/share/[videoId].tsx b/src/pages/share/[videoId].tsx
index bcb4fb4..c35625c 100644
--- a/src/pages/share/[videoId].tsx
+++ b/src/pages/share/[videoId].tsx
@@ -131,14 +131,14 @@ const VideoList: NextPage = () => {
           </div>
         </div>
         <div className="flex h-full w-full grow flex-col items-center justify-start overflow-auto bg-[#fbfbfb]">
-          <div className="flex aspect-video max-h-[calc(100vh_-_169px)] w-full justify-center bg-black 2xl:max-h-[1160px]">
+          <div className="flex max-h-[calc(100vh_-_169px)] w-full justify-center bg-black 2xl:max-h-[1160px]">
             {video?.video_url && (
-              <>
+              <div className="aspect-video h-full">
                 <VideoPlayer
                   thumbnailUrl={video.thumbnailUrl}
                   video_url={video.video_url}
                 />
-              </>
+              </div>
             )}
           </div>
           <div className="mb-10 mt-4 w-full max-w-[1800px] pl-[24px]">