[DESIGN] : 유튜브 반응형

[minzziPark]

상세 구현

• 유튜브 플레이어가 반응형 적용이 안되어 이를 구현해주었음
• Youtube를 감싸는 div 박스를 만들고 div에 relative와 pb-[56.25%] 를 해주고 youtube에 absolute 를 넣어주면 반응형으로 구현된다.

<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>

close #84