react-youtube
youtube 영상을 불러오기 위해서는 iframe를 활용해야 하는데
이때, 좀더 유용하게 할 수 있는 라이브러리들이 존재한다.
많은 라이브러리 중 이름처럼 youtube에 특화되어 있는 @u-wave/react-youtube를 사용하기로 정했는데 autoplay기능이 제대로 작동하지 않는다..
Stackoverflow나 github 이슈를 참고해봐도 해결법을 찾기가 어려워 현재는 플레이어 함수 중에 playVideo가 있길래 onReady 이벤트 발생 시 직접 플레이어를 재생하는 방식으로 변경하였다. ( 추후에 더 찾아보고 변경할 예정이다. )
const [player, setPlayer] = useState();
useEffect(() => {
if (player && !paused) {
console.log('player');
player.playVideo();
}
}, [player, paused]);
const handleReady = target => {
console.log('ready');
setPlayer(target);
};
<YouTube
video={videoId}
autoplay
paused={paused}
volume={volume}
muted={muted}
onReady={e => handleReady(e.target)}
/>여러개의 슬라이더
기존의 슬라이더와 다르게 구성한점은 width를 정할 때 %값을 사용했는데 px로 변경한 점이다.
px단위로 변경하니까 화면 크기를 변경할 때, 슬라이더의 위치를 고정할 수 있었다.
(이미지들은 unsplash를 활용했다.)
