[React] react-youtube로 유튜브 플레이어 삽입

들어가며

넷플릭스 클론 사이트 배너에 트레일러 영상을 달았습니다.
react-youtube는 유튜브에서 제공하고 있는 IFrame Player API를 편하게 쓸 수 있도록 컴포넌트 형태로 만든 것입니다.
이를 이용해서 동영상을 재생 혹은 일시정지하거나 이벤트 리스너를 추가할 수 있습니다.

설치

npm 설치

$ npm install react-youtube

import

import YouTube from 'react-youtube';

컴포넌트 살펴보기

컴포넌트 prop 구성

<YouTube
  videoId={string}                  // defaults -> null
  id={string}                       // defaults -> null
  className={string}                // defaults -> null
  containerClassName={string}       // defaults -> ''
  title={string}                    // defaults -> null
  opts={obj}                        // defaults -> {}
  onReady={func}                    // defaults -> noop
  onPlay={func}                     // defaults -> noop
  onPause={func}                    // defaults -> noop
  onEnd={func}                      // defaults -> noop
  onError={func}                    // defaults -> noop
  onStateChange={func}              // defaults -> noop
  onPlaybackRateChange={func}       // defaults -> noop
  onPlaybackQualityChange={func}    // defaults -> noop
/>

예시

• 넷플릭스 클론에 들어간 플레이어는 이렇습니다.

<YouTube
//videoId : https://www.youtube.com/watch?v={videoId} 유튜브 링크의 끝부분에 있는 고유한 아이디
  videoId={video.key}
//opts(옵션들): 플레이어의 크기나 다양한 플레이어 매개 변수를 사용할 수 있음.
//밑에서 더 설명하겠습니다.
  opts={{
    width: "560",
    height: "315",
    playerVars: {
      autoplay: 1, //자동재생 O
      rel: 0, //관련 동영상 표시하지 않음 (근데 별로 쓸모 없는듯..)
      modestbranding: 1, // 컨트롤 바에 youtube 로고를 표시하지 않음
    },
  }}
  //이벤트 리스너 
  onEnd={(e)=>{e.target.stopVideo(0);}}      
/>

• opts에 들어가는 playerVars은 매개변수입니다.
  자동재생, 동영상 진행률 표시줄 색깔, 동영상의 시작점과 중단점 등을 지정할 수 있습니다.
  https://developers.google.com/youtube/player_parameters 에 들어가면 더 많은 변수들을 볼 수 있습니다.

😢opts 관련해서 주의!
opts prop에 변수를 할당하는 경우 No overload matches this call 타입스크립트 오류가 발생하는 경우가 있습니다.
깃헙 페이지에 가보니 다른 분들도 비슷한 오류를 겪고 있었고, 컴포넌트에 인라인으로 작성하니 오류가 발생하지 않았습니다.

• onEnd는 영상이 끝날 때 발생하는 이벤트입니다.
  player.stopVideo() : 현재 동영상의 로드를 중지하고 취소합니다.
  이를 이용해서 동영상이 끝나고 다른 동영상 썸네일이 뜨는 것을 방지할 수 있습니다.
  
  동영상이 끝나면 처음 화면으로 돌아갑니다.
  

쿠키 관련 오류😢

• 유튜브 플레이어를 재생할 때
  Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute 오류가 발생합니다.
  
  
  보안을 위해 도메인 간의 쿠키를 공유할 수 없고, 이를 해결하기 위해서는 쿠키 속성을 SameSite=None과 Secure 옵션을 같이 지정해야한다고 합니다...
  쿠키도 공부해야할 것 같습니다 (공부할 게 산더미🤣)

📎참고

react-youtube - npm https://www.npmjs.com/package/react-youtube
react-youtube github - https://github.com/tjallingt/react-youtube
IFrame Player API - https://developers.google.com/youtube/iframe_api_reference