Merge pull request #85 from 2024-hgu-ccd-one-in-christ/issue84

[DESIGN] : 유튜브 반응형
2024-hgu-ccd-one-in-christ · Oct 7, 2024 · 3f34168 · 3f34168
2 parents d1dbc17 + 10fb847
commit 3f34168
Showing 1 changed file with 16 additions and 14 deletions.
diff --git a/src/components/works/Creation.tsx b/src/components/works/Creation.tsx
@@ -11,20 +11,22 @@ const Creation = ({ creation }: Props) => {
     <div className={`w-full flex flex-col`}>
       {creation?.map((item) =>
         item.extension === "youtube" ? (
-          <YouTube
-            className={`w-full h-[661px]`}
-            videoId={item.src} //동영상 주소
-            opts={{
-              width: "100%",
-              height: "100%",
-              playerVars: {
-                autoplay: 1,
-                modestbranding: 0, //컨트롤 바에 유튜브 로고 표시 여부
-                loop: 1, //반복 재생
-                playlist: `${item.src}`, //반복 재생으로 재생할 플레이 리스트
-              },
-            }}
-          />
+          <div className={`w-full relative pb-[56.25%]`}>
+            <YouTube
+              className={`absolute w-full h-full`}
+              videoId={item.src} //동영상 주소
+              opts={{
+                width: "100%",
+                height: "100%",
+                playerVars: {
+                  autoplay: 0,
+                  modestbranding: 0, //컨트롤 바에 유튜브 로고 표시 여부
+                  loop: 1, //반복 재생
+                  playlist: `${item.src}`, //반복 재생으로 재생할 플레이 리스트
+                },
+              }}
+            />
+          </div>
         ) : (
           <img
             src={`${DOMAIN}${item.src}`}