화면에 자동재생되는 영상 넣기

bebrain·2023년 2월 13일
0

우리 팀프로젝트 주제가 애니메이션 요리인 만큼 메인페이지 백그라운드에 애니 요리영상이 재생되도록 컨셉을 정했다.

처음에 react-youtube를 이용해서 영상을 넣어 보았다.

npm i react-youtube

iframe태그로 넣는데 문제점이 보였다.

  1. controls에 false(0)를 주어도 마우스 hover시 유튜브로고와 채널정보 등이 보여서 보기가 싫었다.

원래 showInfo라고 유튜브로고와 채널명을 숨길 수 있는 옵션이 있었으나 2018년 이후로 이용중단되었다. 아마 유튜브 유입량을 늘리기 위한 조치인듯 하다.


2. 첫 렌더링시 자동재생이 되지 않는다.

그러던 중 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

0개의 댓글