유튜브 동영상 레이어 팝업에 넣은 후 자스로 제어하기
유투브 동영상 버튼 클릭 시 레이어 뜨면서 자동실행
또는 종료버튼 클릭 시 자동으로 종료하는 소스 입니다.
유튜브 동영상은 유튜브 주소에 autoplay=1을 하면 유튜브 동영상 노출 시 자동으로 동영상이 실행 되고
autoplay=0 하면 동영상 노출 시 동영상이 실행 되지 않는 것을 이용하여
레이어 팝업이 노출 되면 동영상 실행
레이어 팝업이 없어지면 동영상을 종료 하게 했습니다.
<div id="Ulayer" style="width:560px;height:335px;visibility:hidden;position:absolute;left:200px;top:400px;">
<span style="float:right;width:100px;height:20px;width:560px;text-align:right;padding-right:10px;font-weight:600;"><a href="javascript:;" onClick="UMOVEClose()">[닫기]</a></span>
<object width="560" height="315"><param id="umove1" name="movie" value="//www.youtube.com/v/djkElboUs1I?version=3&hl=ko_KR&autoplay=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed id="umove2" src="//www.youtube.com/v/djkElboUs1I?version=3&hl=ko_KR&autoplay=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</div>
style일 때문에 복잡해 보이지만 유튜브 소스는 object로 시작하는 부분이죠.
아래는 자스 소스에요
function UMOVE(){
document.getElementById("Ulayer").style.visibility = "visible";
document.getElementById("umove2").src = "//www.youtube.com/v/djkElboUs1I?version=3&hl=ko_KR&autoplay=1";
document.getElementById("umove1").src = "//www.youtube.com/v/djkElboUs1I?version=3&hl=ko_KR&autoplay=1";
}
function UMOVEClose(){
document.getElementById("Ulayer").style.visibility = "hidden";
document.getElementById("umove2").src = "//www.youtube.com/v/djkElboUs1I?version=3&hl=ko_KR&autoplay=0";
document.getElementById("umove1").src = "//www.youtube.com/v/djkElboUs1I?version=3&hl=ko_KR&autoplay=0";
}
아이프레임에 src 부분을 새로 넣어 줌으로
유투브 동영상을 시작과 종료를 할 수 있어요
유투브 동영상 버튼 클릭 시 레이어 뜨면서 자동실행
또는 종료버튼 클릭 시 자동으로 종료하는 소스 입니다.
유튜브 동영상은 유튜브 주소에 autoplay=1을 하면 유튜브 동영상 노출 시 자동으로 동영상이 실행 되고
autoplay=0 하면 동영상 노출 시 동영상이 실행 되지 않는 것을 이용하여
레이어 팝업이 노출 되면 동영상 실행
레이어 팝업이 없어지면 동영상을 종료 하게 했습니다.
<div id="Ulayer" style="width:560px;height:335px;visibility:hidden;position:absolute;left:200px;top:400px;">
<span style="float:right;width:100px;height:20px;width:560px;text-align:right;padding-right:10px;font-weight:600;"><a href="javascript:;" onClick="UMOVEClose()">[닫기]</a></span>
<object width="560" height="315"><param id="umove1" name="movie" value="//www.youtube.com/v/djkElboUs1I?version=3&hl=ko_KR&autoplay=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed id="umove2" src="//www.youtube.com/v/djkElboUs1I?version=3&hl=ko_KR&autoplay=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</div>
style일 때문에 복잡해 보이지만 유튜브 소스는 object로 시작하는 부분이죠.
아래는 자스 소스에요
function UMOVE(){
document.getElementById("Ulayer").style.visibility = "visible";
document.getElementById("umove2").src = "//www.youtube.com/v/djkElboUs1I?version=3&hl=ko_KR&autoplay=1";
document.getElementById("umove1").src = "//www.youtube.com/v/djkElboUs1I?version=3&hl=ko_KR&autoplay=1";
}
function UMOVEClose(){
document.getElementById("Ulayer").style.visibility = "hidden";
document.getElementById("umove2").src = "//www.youtube.com/v/djkElboUs1I?version=3&hl=ko_KR&autoplay=0";
document.getElementById("umove1").src = "//www.youtube.com/v/djkElboUs1I?version=3&hl=ko_KR&autoplay=0";
}
아이프레임에 src 부분을 새로 넣어 줌으로
유투브 동영상을 시작과 종료를 할 수 있어요
게시글 목록
| 번호 | 제목 |
|---|---|
| 19528 |
JavaScript
그누보드4 에 Daum 우편번호 찾기 API 연동 하기.
|
| 6810 | |
| 6807 | |
| 6801 | |
| 6798 | |
| 6791 | |
| 24615 | |
| 24612 | |
| 6788 | |
| 30933 | |
| 6784 | |
| 6783 | |
| 27834 | |
| 19527 | |
| 19526 | |
| 19524 |
MySQL
MYSQL 기본 명령어들 모음
1
|
| 19521 | |
| 6777 | |
| 6770 | |
| 19519 |
웹서버
FTP 프로세스 죽이기
1
|
| 27823 | |
| 6766 | |
| 24604 | |
| 6760 | |
| 6757 | |
| 30925 | |
| 19518 | |
| 30924 |
CSS
CSS slider 테스트1
|
| 30923 |
CSS
수평메뉴1
|
| 6746 |
개발자
스페이스 vs 탭
10
|
| 19516 |
node.js
Node.js 서버의 기본적인 내용 정리
1
|
| 30922 |
기타
dpi 환산표(?)
|
| 19515 | |
| 30921 | |
| 6732 |
개발자
미수금은 적립금인가요..
13
|
| 27803 | |
| 19508 |
PHP
숫자를 한글로 변환
2
|
| 19507 | |
| 24599 | |
| 19504 |
PHP
썸네일 클래스입니다
2
|
| 19501 | |
| 19498 |
MySQL
자주쓰는 MYSQL
2
|
| 19497 | |
| 19496 |
PHP
두지점의 위도,경도간 거리계산
|
| 19495 | |
| 19493 |
MySQL
무한 로딩 중인 쿼리 죽이기
1
|
| 19492 |
기타
파폭 ssh, ftp
|
| 19491 |
MySQL
mysql 기본 사용법
|
| 19490 | |
| 19489 | |
| 6721 |
개발자
암울한 웹의 미래
10
|
| 6720 |
개발자
혁신적이거나 싸지거나
|
| 19488 |
jQuery
제이쿼리를 이용하여 노드 선택
|
| 19487 |
jQuery
append를 이용하여 엘리먼트 추가하기
|
| 19486 | |
| 19485 |
JavaScript
000000.1원팁 ^^ 자스로 아이프레임 target 제어
|
| 30919 | |
| 19484 | |
| 30913 | |
| 30910 | |
| 19483 |
JavaScript
레이어를 이용한 셀렉트 박스
|
| 19482 |
JavaScript
유투브 동영상 노출 시 자동 실행 또는 자동 종료 소스입니다.
현재글
|
| 19478 |
jQuery
페이스북 글 가져오기 쉬운방법.
3
|
| 30908 | |
| 19477 | |
| 31683 | |
| 19475 | |
| 19473 | |
| 19471 | |
| 19470 | |
| 19469 | |
| 19468 |
JavaScript
아이폰5s 소개페이지같은 사이트 만들기(?)
|
| 19467 |
PHP
달력 출력하기
|
| 19466 | |
| 19464 |
JavaScript
[1원짜리팁]새창 띄우기 소스
1
|
| 19462 | |
| 19461 | |
| 19460 |
JavaScript
아이프로그램 닫기
|
| 19459 |
JavaScript
자바스크립트 공백 제거
|
| 31680 | |
| 19458 | |
| 19457 | |
| 31676 | |
| 31674 | |
| 31671 | |
| 31670 | |
| 31669 | |
| 31664 | |
| 31663 | |
| 31662 | |
| 31658 | |
| 31657 | |
| 19456 |
PHP
GPS정보 모바일에서 사용하기
|
| 19455 | |
| 31655 | |
| 31653 | |
| 31649 | |
| 31646 | |
| 27800 | |
| 19454 |
JavaScript
메뉴 네비 레이어 서서히 없어지는거
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기