유튜브 동영상 크게 띄우기 ~
본문
버튼을 클릭 하면
동영상이 레이어팝업으로 뜨면서 전체 화면 자동 재생
닫기 버튼 누르면 다시 원래로 돌아 오는 작업을 하려고 합니다
소스를 모아서 만들었는데요
문제가 있습니다
첫째 !
닫기 해도 동영상이 계속 플레이 되서 소리가 납니다
둘쨰 !
가로 세로 스코롤이 생깁니다
셋쨰 !
자동 플레이가 안 됩니다
어떻게 해야 할까요 ?
아니면 이 소스 만들 다른 소스가 있을까요 ?
적용된 페이지
소스 ~
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*-- POPUP common style S ======================================================================================================================== --*/
#mask {
position: absolute;
left: 0;
top: 0;
z-index: 999;
background-color: #000000;
display: none;
}
.layerpop {
display: none;
z-index: 1000;
border: 0px solid #000;
background: #000;
cursor: move;
}
.layerpop_area .layerpop_close {
width: 50px;
height: 50px;
display: block;
position: absolute;
top: 150px;
right: 150px;
background: transparent url('btn_exit_off.png') no-repeat;
}
.layerpop_area .layerpop_close:hover {
background: transparent url('btn_exit_on.png') no-repeat;
cursor: pointer;
}
.layerpop_area .content {
width: 100%;
margin: 0%;
color: #000000;
}
/*-- POPUP common style E --*/
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<!--드래그 할수 있는 기능을 사용하기 위해서 draggable();-->
<script>
function wrapWindowByMask() {
//화면의 높이와 너비를 구한다.
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//문서영역의 크기
console.log( "document 사이즈:"+ $(document).width() + "*" + $(document).height());
//브라우저에서 문서가 보여지는 영역의 크기
console.log( "window 사이즈:"+ $(window).width() + "*" + $(window).height());
//마스크의 높이와 너비를 화면 것으로 만들어 전체 화면을 채운다.
$('#mask').css({
'width' : maskWidth,
'height' : maskHeight
});
//애니메이션 효과
//$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow", 0.5);
}
function popupOpen() {
$('.layerpop').css("position", "absolute");
//영역 가운에데 레이어를 뛰우기 위해 위치 계산
$('.layerpop').css("top",(($(window).height() - $('.layerpop').outerHeight()) / 2) + $(window).scrollTop());
$('.layerpop').css("left",(($(window).width() - $('.layerpop').outerWidth()) / 2) + $(window).scrollLeft());
$('.layerpop').draggable();
$('#layerbox').show();
}
function popupClose() {
$('#layerbox').hide();
$('#mask').hide();
}
function goDetail() {
popupOpen(); //레이어 팝업창 오픈
}
</script>
</head>
<body>
<button onClick="javascript:goDetail('테스트');">Play</button>
<!--Popup Start -->
<div id="layerbox" class="layerpop"
style="width: 100%; height: 100%;">
<article class="layerpop_area">
<a href="javascript:popupClose();" class="layerpop_close"
id="layerbox_close"></a>
<div class="content"><iframe id="video" src="https://www.youtube.com/embed/1cHeEHk9Y2s?autoplay=1" allow="autoplay" frameborder="0"></iframe>
<script>
$(function(){
$('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });
// If you want to keep full screen on window resize
$(window).resize(function(){
$('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });
});
});
</script>
</div>
</article>
</div>
<!--Popup End -->
</body>
</html>
