리액트 - 유튜브 영상 넣기

리액트에 mp4로 영상을 넣는 방법도 있지만, 좀 더 편하게 유튜브 영상을 넣는 방법이 있다.

(mp4로 하려면 mp4를 다운로드하고, 라이브러리도 깔아줘야 하고... 아무튼 복잡함)

---

1. 라이브러리 깔기

$ npm install react-youtube

일단 npm 라이브러리를 깐다. 코드는 위와 같다.

---

2. import 설정

import YouTube from 'react-youtube';

jsx 파일에 import문을 작성한다. 코드는 위와 같다.

---

3. 예시 코드 >

.jsx

<YouTube
	className="youtube"
    videoId='ACu9qUrXvow'
    opts={{
    	width: '324px',
        height: '316px',
         }}
/>

.youtube {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 20px;
}

리액트에서 클래스명 짓는 것처럼 똑같이 className으로 세팅해 주면 된다.

다만, 넓이와 높이는 css로 설정이 안되는 듯하다. 그래서 opts을 이용해서 높이와 넓이를 주면 된다.

display인 flex 박스를 이용해서 완전 중앙 정렬도 가능하고, 마진도 가능하다.

videId는 유튜브 공유 링크 뒤에 있는 아이디를 넣어주면 된다.

보면 watch?v= ~~~ 이런 식이다. 우리는 뒤에 ~~~ 만 쓰면 된다. (위 영상을 기준으로 q0YCVSxbcVg가 될 것이다.)

이 부분에서 실수를 많이 한다. 조심하자.

---

추가적으로 보면 좋은 글

https://velog.io/@soonmac/React-npm-react-youtube

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

---