공부하자
유튜브 레이어 팝업 만들기 본문
유튜브 레이어 팝업 만드는 작업까진 어렵지 않았는데
팝업 닫을 때 문제가 생겼다..
팝업을 닫는다고 해서 동영상이 멈추진 않음..
당연한 소리..
유튜브에서 지원하는 api를 이용하여 다양한 커스텀을 시도 할 수도 있고
https://developers.google.com/youtube/iframe_api_reference?hl=ko
iframe 삽입에 대한 YouTube Player API 참조 문서 | YouTube IFrame Player API
Embed a YouTube player in your application.
developers.google.com
api를 이용한 커스텀이 어렵다면 간단하게 이런 방법도
javascript youtube api iframe 제어(play/pause/stop)
youtube api가 ie8에서 오류가있어서 iframe으로 제어해야할 일이생김. 그냥 iframe에 id값만 지정을해주고, src쪽에는 enablejsapi=1&version=3&playerapiid=ytplayer 넣어주고.. $('#player')[0].contentWindow...
19park.tistory.com
api를 이용하여 유튜브 영상 재생, 일시정지
폴시랩
자바스트립트, PHP, 워드프레스, HTML, CSS, 팁, 가이드, 일상이야기.
falsy.me
js를 이용하여 컨트롤
유튜브 재생 중인 팝업 레이어 숨길 때 재생 멈추는 방법 > SIR
이 방법은 다시 팝업 레이어를 띄울 때 동영상을 처음부터 봐야한다는 단점이 있습니다.
https://marshall-ku.tistory.com/179
유튜브 팝업 레이어 만들기
.popupVideo란 div 아래의 a 태그를 클릭하면 유튜브 비디오를 레이어로 띄워 주면서 영상을 재생합니다. (PC) 화면의 빈 곳을 누르면 팝업 레이어가 사라지면서 유튜브 영상이 정지됩니다. a 태그 안
marshall-ku.tistory.com
개인적으로 참고해서 커스텀하기 가장 쉬었던 마지막 참고 블로그
영상 팝업이 여러개 올라가는 경우 두번째 api 참고 방법을 사용하면
각각의 레이어에 id 값을 따로줘서 컨트롤해야된다.
영상 추가될때마다 js도 한줄이 늘어나는 셈..
찾다가 찾다가 마지막 블로그를 찾았는데 정말 한줄기 빛이엇읍니다...ㅠ
트와이스 잘나가지만 더욱 더 꽃길만 걸으세요
'J-Query·JavaS' 카테고리의 다른 글
| 브라우저 화면 사이즈 구하기 (0) | 2021.09.30 |
|---|---|
| 메뉴 클릭시 활성화 시키기 (0) | 2021.07.12 |
| 제이쿼리(J-Query) 메소드 append() (0) | 2021.01.10 |
| 제이쿼리(J-Query) 이벤트 메소드 scroll(), scrollTop() (0) | 2021.01.08 |
| 제이쿼리(J-Query) 이벤트 메소드 keypress() (0) | 2021.01.08 |