[jQuery] 유튜브 iframe 동적 생성

bpopup을 사용해서 모달 형식으로 유튜브 iframe을 사용하였는데

목록페이지에 나오는 모든 유튜브iframe을 로딩하다보니 페이지로딩 시간이 너무 길어져서 모달이 뜰때 해당하는 iframe을 불러오는 방식으로 변경하였다.

 

$(function(){
	/* 모달팝업 js */
	//$('.btn[class*="popup_"],a[class*="popup_"]').click(function(e){
	$(document).on("click", '.btn[class*="popup_"],a[class*="popup_"]', function(e){
		e.preventDefault();
		var popNum;
		var str = $(this).attr('class'); // 클래스 모두 가져옴
		var afterStr = str.split(" "); // 공백을 기준으로 클래스를 나눠 배열에 저장
		$.each(afterStr, function(index, popCl){ 
			if(popCl.startsWith('popup_')) { // 배열 요소 중에 popup_로 시작하는 단어가 있다면
				popNum = popCl.split("_").reverse()[0]; // _를 기준으로 나누어서 숫자만 추출
				$('[id*="popup_"] iframe').remove(); // 기존에 열려있던 iframe 제거
				$("#videoUrl_"+popNum).append($("#url_"+popNum).val()); // input hidden으로 저장해둔 iframe 불러오기
			}
		});
		$("#popup_"+popNum).bPopup({ // #popup_ + 숫자 해서 모달 출력
			follow: [false, false],
			positionStyle:'fixed',
			position: ['auto', 50],
			opacity: 0.5,
		});
	});
});

처음에는 잘 되다가 

iframe이 로딩이 20초이상 걸리는 문제가 발생하였다.

 

아직도 정확한 원인은 모르지만 의심가는 문제는 iframe.remove를 하고 바로 iframe을 로딩하려다 문제가 발생한것으로 보여 setTimeout 함수를 이용하여 일정 시간뒤에 로딩하는 것으로 변경하였더니 문제가 해결되었다.

 

1. setTimeout 함수 추가

2. iframe제거를 bpop close 이벤트로 변경

$(function(){
	/* 모달팝업 js */
	//$('.btn[class*="popup_"],a[class*="popup_"]').click(function(e){
	$(document).on("click", '.btn[class*="popup_"],a[class*="popup_"]', function(e){
		e.preventDefault();
		var popNum;
		var str = $(this).attr('class'); // 클래스 모두 가져옴
		var afterStr = str.split(" "); // 공백을 기준으로 클래스를 나눠 배열에 저장
		$.each(afterStr, function(index, popCl){ 
			if(popCl.startsWith('popup_')) { // 배열 요소 중에 popup_로 시작하는 단어가 있다면
				popNum = popCl.split("_").reverse()[0]; // _를 기준으로 나누어서 숫자만 추출
				setTimeout(function(){ $("#videoUrl_"+popNum).append($("#url_"+popNum).val());  }, 100);
			}
		});
		$("#popup_"+popNum).bPopup({ // #popup_ + 숫자 해서 모달 출력
			follow: [false, false],
			positionStyle:'fixed',
			position: ['auto', 50],
			opacity: 0.5,
			onClose: function() { $('[id*="popup_"] iframe').remove(); } // iframe 제거
		});
	});
});

수정 후에는 정상 작동하였음.

 

그리고 bpopup close 이벤트에 iframe을 제거하는 코드를 추가하지 않으면 bpopup이 닫힌 후에도 영상이 계속 재생된다.