youtube iframe 재생, 정지 버튼 커스텀

왜 만들게 되었냐고 물으신다면

현재 토이프로젝트를 하고있는데, 유튜브 영상이 필요했고 이 영상을 안보이게 하고 소리만 들을 수 있게 버튼을 따로 만들고자 했다.

이게 방법을 찾다 찾다가 해결한 나머지 기분이 좋은 상태였어서 버튼 이름들이 정신없다..

대부분의 자료가 사용한지 오래된 제이쿼리라서 시간을 좀 썼다.

참고는 여기서!!!

아무튼 처음엔 버튼을 두 개로 만들었었는데 코드의 양을 줄이기 위해 바로 바꿨다.

// js
let isPlay = false; // true면 재생, false면 정지한다.
  const isPlayVideo = () => {
    isPlay = !isPlay;
    if (isPlay) {
      document
        .querySelector('#ytVideo')
        .contentWindow.postMessage(
          '{"event":"command","func":"' + 'playVideo' + '","args":""}',
          '*',
        );
    } else {
      document
        .querySelector('#ytVideo')
        .contentWindow.postMessage(
          '{"event":"command","func":"' + 'pauseVideo' + '","args":""}',
          '*',
        );
    }
  };

//html
<iframe
          id='ytVideo'
          width='375'
          height='200'
          src={`https://www.youtube.com/embed/${videoId}?autoplay=0&mute=0&autohide='2'&modestbranding=1&enablejsapi=1&version=3&playerapiid=ytplayer`}
          frameBorder='0'
          allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
          allowFullScreen
  ></iframe>

src의 ? 다음 부분에 enablejsapi=1 을 꼭 넣어줘야 위의 함수가 정상적으로 작동한다.

버튼을 따로 만들어준 상태이기 때문에,
display : none 으로 영상을 화면에서 없애도 버튼을 클릭만 하면 노래가 정상적으로 재생된다.

최종 화면

그래서 현재 화면은

이 상태다~!

UI는 마지막에 다듬어야겠다