유튜브 아이프레임 일시정지

 

https://developers.google.com/youtube/iframe_api_reference?hl=ko

iframe 삽입에 대한 YouTube Player API 참조 문서  |  YouTube IFrame Player API  |  Google for Developers

 

- 처음에는 이 api를 통해서 아이프레임 영역을 만들고

player.pauseVideo();함수를 실행시켜서 특정 상황에서 일시정지 기능을 넣었다.

 

근데 테스트를 하다보니 일시정시 기능이 간헐적으로 작동하지 않았고.

api를 통해 아이프레임을 생성한 동영상에서 일시 정지 버튼을 눌렀을 때

연관동영상? 추천동영상이 영상 하단 부분에 뜨는 문제가 있었다.

해당 css영역을 none처리 하려고 했지만 제대로 작동하지 않았다.

그래서 다시 api가 아닌 직접 아이프레임을 작성하는 방식으로 변경하고 직접 아이프레임을 제어하는 방식으로 변경했다.

 

 

https://velog.io/@wnsh27/youtube-iframe-%EC%9E%AC%EC%83%9D-%EC%A0%95%EC%A7%80-%EB%B2%84%ED%8A%BC-%EC%BB%A4%EC%8A%A4%ED%85%80

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

document
        .querySelector('#아이프레임 id')
        .contentWindow.postMessage(
          '{"event":"command","func":"' + 'pauseVideo' + '","args":""}',
          'https://www.youtube.com/',
        );

하면 일시정지 함수가 실행된다.

중요한 것은 rel=0&enablejsapi=1이 주소에 꼭 있어야 한다는 것이다.

enablejsapi=1를 몰라서 어제 하루 버림..

 

1) rel=0

일시정지 시 추천동영상 영역 노출 안시킴

2) enablejsapi=1

아이프레임 직접를 통한 일시정시 기능에서 반드시 필요