우리 팀프로젝트 주제가 애니메이션 요리인 만큼 메인페이지 백그라운드에 애니 요리영상이 재생되도록 컨셉을 정했다.
처음에 react-youtube를 이용해서 영상을 넣어 보았다.
npm i react-youtube
iframe태그로 넣는데 문제점이 보였다.
원래 showInfo라고 유튜브로고와 채널명을 숨길 수 있는 옵션이 있었으나 2018년 이후로 이용중단되었다. 아마 유튜브 유입량을 늘리기 위한 조치인듯 하다.
그러던 중 react-player를 쓰면 된다는 말에 react-player설치
npm i react-player
youtube영상도 클릭없이 자동재생이 잘 되는 걸 볼 수 있다.
상세코드는 아래의 포스팅 참조
https://velog.io/@bebrain/Error-Hydration-failed-because-the-initial-UI-does-not-match-what-was-rendered-on-the-server