[리액트] 유튜브 영상 삽입

react-youtube 패키지로 간단하게 리액트에서 유튜브 영상을 삽입할 수 있다.

npm install react-youtube

프로젝트에서 터미널에 위 명령어를 입력해서 react-youtube 패키지를 우선 설치해야 한다.

 

설치가 완료되면 다른 컴포넌트들과 동일하게 import해서 사용하면 된다.

import Youtube from 'react-youtube'

 

컴포넌트의 속성은 아래와 같은 종류들이 있다.

<YouTube
  videoId={string}                  // defaults -> ''
  id={string}                       // defaults -> ''
  className={string}                // defaults -> ''
  iframeClassName={string}          // defaults -> ''
  style={object}                    // defaults -> {}
  title={string}                    // defaults -> ''
  loading={string}                  // defaults -> undefined
  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
/>

videoId는 유튜브 영상의 주소에서 'v={id}' 형태를 하는 부분을 찾을 수 있는데, 여기서 id의 부분을 의미한다.

opts에는 유튜브 iframe api에 있는 벨류들을 사용할 수 있다. 객체의 형태로 전달하면 된다.

on으로 시작하는 이벤트 리스너들도 유튜브 iframe api와 동일하다.

 

아래 코드처럼 사용자의 프로젝트에 맞게 조정하면서 사용한다.

리액트앱 화면

 

패키지를 사용하기 때문에 npm 문서와 유튜브 iframe api를 확인하면서 사용하면 간단하게 사용할 수 있다.

유튜브 영상은 이곳저곳에서 많이 사용되니 알아두면 편하게 사용할 것 같다.

---

https://www.npmjs.com/package/react-youtube

react-youtube

https://developers.google.com/youtube/player_parameters?hl=ko 

YouTube 내장 플레이어 및 플레이어 매개변수  |  YouTube IFrame Player API  |  Google for Developers