https://developers.google.com/youtube/iframe_api_reference?hl=ko
iframe 삽입에 대한 YouTube Player API 참조 문서 | YouTube IFrame Player API | Google for Developers
애플리케이션에 YouTube 플레이어를 삽입합니다.
developers.google.com
- 처음에는 이 api를 통해서 아이프레임 영역을 만들고
player.pauseVideo();함수를 실행시켜서 특정 상황에서 일시정지 기능을 넣었다.
근데 테스트를 하다보니 일시정시 기능이 간헐적으로 작동하지 않았고.
api를 통해 아이프레임을 생성한 동영상에서 일시 정지 버튼을 눌렀을 때
연관동영상? 추천동영상이 영상 하단 부분에 뜨는 문제가 있었다.
해당 css영역을 none처리 하려고 했지만 제대로 작동하지 않았다.
그래서 다시 api가 아닌 직접 아이프레임을 작성하는 방식으로 변경하고 직접 아이프레임을 제어하는 방식으로 변경했다.
youtube iframe 재생, 정지 버튼 커스텀
현재 토이프로젝트를 하고있는데, 유튜브 영상이 필요했고 이 영상을 안보이게 하고 소리만 들을 수 있게 버튼을 따로 만들고자 했다.이게 방법을 찾다 찾다가 해결한 나머지 기분이 좋은 상태
velog.io
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
아이프레임 직접를 통한 일시정시 기능에서 반드시 필요
'차근차근 > JAVA Script' 카테고리의 다른 글
| 알럿창 메시지에 볼드넣기 (1) | 2024.01.09 |
|---|---|
| 메뉴 상단 고정, 탭이동 js (0) | 2023.12.29 |
| ajax뒤로가기 시 이전 데이터 유지 (0) | 2023.09.05 |
| 마우스 오버 모바일에서 한번 더 터치해야 사라짐..해결중.. (0) | 2023.08.25 |
| html 이미지로 만들어서 저장하기 (0) | 2023.04.03 |