넷플릭스 클론 사이트 배너에 트레일러 영상을 달았습니다. react-youtube는 유튜브에서 제공하고 있는 **IFrame Player API**를 편하게 쓸 수 있도록 컴포넌트 형태로 만든 것입니다. 이를 이용해서 동영상을 재생 혹은 일시정지하거나 이벤트 리스너를 추가할 수 있습니다.
$ npm install react-youtube
import YouTube from 'react-youtube';
<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 옵션을 같이 지정해야한다고 합니다... 쿠키도 공부해야할 것 같습니다 (공부할 게 산더미🤣)
