본문 바로가기
카테고리 없음

팝업 닫기 유튜브 멈춤, 재생 다시 열었을 때 재생하기 / 유튜브 자동 재생 html js css

by 지짱히메 2021. 8. 10.
반응형

html

	<div class="pop_youtube" id="layer">
		<div class="close_tbn">
			<a href="#none" class="close_tbn02" > <img src="image/common/close_03.png" alt=""/> </a>
		</div>
		<div class="wrap">
			<div class="iframe_box">
				<iframe id="player" src="유튜브주소" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
			</div>
		</div>
	</div>

js 스크립트

				$(function(){

					var embed = $('#player'); //동영상 코드

					$('.button').on('click', function(){ //레이어 열때
						var path = $(this).attr('href');
						$('.iframe_box').append(embed);
						$(path).fadeIn();
					})

					$('.close_tbn02').on('click', function(){ //레이어 닫을때
						$(this).parents('#layer').fadeOut();
						$('.iframe_box').empty();
					})
					// 외부영역 클릭 시 팝업 닫기
							$(document).mouseup(function (e){
								var LayerPopup = $(".pop_youtube");
								if(LayerPopup.has(e.target).length === 0){
									// LayerPopup.removeClass("show");
									$(".pop_youtube").fadeOut();
									$('.iframe_box').empty(300);
									$("body").css("overflow", "auto");
								}
							});

				});
반응형