Next.js) react-youtube로 유튜브 영상 삽입하기

react-youtube-NPM

react-youtube 라는 라이브러리를 이용하여, 유튜브의 영상을 애플리케이션에 삽입해보자!

이전에 React에서 유튜브 영상으로 배경화면 만들기! 로 사용하였던 라이브러리인 react-player는 mute를 하지않으면 autoplay가 되지 않는다는 치명적인 단점이 있었다.

react-youtube는 google에서 제공하는 IFrame Player API를 편하게 사용할 수 있도록 하는 라이브러리이다.

우선 npm사이트에서 사용방법을 확인해보자.

Props

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

youtube player는 YouTube라는 컴포넌트를 사용하며, props는 위의 코드와 같다.

videoId는 youtube에 들어가면 주소창에 존재하는 아이디이다!

사용예시는 다음과 같다.

import YouTube, { YouTubeProps } from 'react-youtube';

function Example() {
  const onPlayerReady: YouTubeProps['onReady'] = (event) => {
    // access to player in all event handlers via event.target
    event.target.pauseVideo();
  }

  const opts: YouTubeProps['opts'] = {
    height: '390',
    width: '640',
    playerVars: {
      autoplay: 1,
    },
  };

  return <YouTube videoId="2g811Eo7K8U" opts={opts} onReady={onPlayerReady} />;
}

opts에 playerVars에 IFrame Player API 에 매개변수내용을 넣으면 된다!

onReady 뿐만아니라 위의 props에서 나와있듯 onEnd, onPlay 등등 다양한 곳에 기능을 넣을 수 있다.

동영상이 끝났을 때, 비디오를 멈추려면 다음과 같이 사용할 수도 있다.

<YouTube
    videoId="2g811Eo7K8U"
    opts={opts}
    onReady={onPlayerReady}
    onEnd={(e) => {
      e.target.stopVideo(0);
    }}
/>

성공!! 😀