설 쉬고 다시 프로젝트 TIL

설날 시작 전 미리 html,css등을 작업해놓고 다시 설날 지나고 나서 팀원들과 그 동안 생겼던 오류들과 해결해야할 부분들을 회의했다.

조금 손 봐야할 곳이 css 쪽이였는데 금방 일줄알았는데 지금이다. 하루종일했다.

 

1. 만난 문제

메인페이지를 맡아서 기능이라면 유튜브 API를 받아서 map으로 돌리면 된다고 생각했다.

근데 내가 만들어놓은 유튜브 css자리에 영상이 자꾸 짤려서 나온다. 딱 맞고 이쁘게 나왔으면 좋겠는데 안됬다.

유튜브영상을 감싸고 있는 container에 width,height값을 주고나서  유튜브영상에다가 w,h:100%를줘도 안된다.

 

2.시도

시도..어마무시하게 해서 헷갈릴 정도 그냥 css height 맞출수 있는거라면 다했다.

 

3.해결

결국에 다시 구조를 짰다. css로 시간을 날리면 기능 구현할때 급해지니까 과감히 그냥 처음부터 하기로했다.

여백에 영상이 들어갈 박스, 타이틀 박스 , 좋아요 박스 하나씩 따로 다 만들었다.

그전엔 동영상 componenet를 만들어서 재사용하려고 props로 설정들을 다보냈었는데 그런부분을 일단 다 재껴두고

하드코딩으로 자리를 잡은다음 하나씩 props로 바꿨다.

그리고 결정적인거는 

<YouTube
        style={style}  //여기다가 height,width값을 다시 한번 더 주니까 크기 변경이 가능했다.
        videoId={videoId}
        opts={{
          height: "100%",
          width: "100%",
          playerVars: {
            autoplay: 0,
            rel: 0,
            modestbranding: 1,
          },
        }}
        //이벤트 리스너
        onEnd={(e) => {
          e.target.stopVideo(0);
        }}
      />

 

4.얻은 점

유튜브 가져와서 크기 수정이야 하고 쉽게봤던 내가 잘못이지

그래도 쫌 뿌듯한건 css로 그렇게 고생해놓고 API로 영상 가지고 오는건 금방걸렸다. 한 30분만에 가져오기 성공한거같다.

이 가져오는 함수 가지고 다른 곳에 다시 사용하면 좋을 꺼 같다. 오늘 TIL 😎