[PC] 유튜브 동영상 팝업레이어(모달)로 열기 > 기술자료 | 해피정닷컴

[PC] 유튜브 동영상 팝업레이어(모달)로 열기 > 기술자료

본문 바로가기

사이트 내 전체검색

[PC] 유튜브 동영상 팝업레이어(모달)로 열기 > 기술자료

HTML [PC] 유튜브 동영상 팝업레이어(모달)로 열기

페이지 정보


본문

모바일(스마트폰) 홈페이지에서의 유튜브 : https://www.happyjung.com/lecture/2755

샘플보기 : https://www.happyjung.com/demo/css/youtube4.html

<script src="//code.jquery.com/jquery-1.12.4.min.js" crossorigin="anonymous"></script>

<style>
.video_modal_popup.reveal {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
    z-index: 9999999
}

.video_modal_popup .video-wrapper {
    position: relative;
    width: 80%;
    padding-bottom: 45%;
    z-index: 10
}

.video_modal_popup .video-wrapper iframe {
    position: absolute;
    width: 100%;
    height: 100%;
}

.video_modal_popup.reveal .video_modal_popup-closer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 9999999
}
</style>

<div class="popupModalVideo">
    <a data-video="ruXXj-3T2e4">1번 영상</a>
    <a data-video="MmMdySW2yH0">2번 영상</a>
</div>
<div class="video_modal_popup">
  <div class="video_modal_popup-closer"></div>
</div>

<script>
$(".popupModalVideo a").click(function() {
    $(".video_modal_popup").addClass("reveal"),
    $(".video_modal_popup .video-wrapper").remove(),
    $(".video_modal_popup").append("<div class='video-wrapper'><iframe width='560' height='315' src='https://youtube.com/embed/" + $(this).data("video") + "?rel=0&playsinline=1&autoplay=1' allow='autoplay; encrypted-media' allowfullscreen></iframe></div>")
}),
$(".video_modal_popup-closer").click(function() {
    $(".video_modal_popup .video-wrapper").remove(),
    $(".video_modal_popup").removeClass("reveal")
});
</script> 


참고자료
http://marshall-ku.tistory.com/179

댓글목록

등록된 댓글이 없습니다.


Total 2,634건 13 페이지
  • RSS
기술자료 목록
2394
일반   4824  2020-06-05 21:44  
2393
일반   6860  2020-06-03 16:47  
2392
도메인   17114  2020-05-26 18:12 ~ 2020-05-31 19:16  
2391
Adobe   7967  2020-05-23 22:47 ~ 2020-06-07 01:08  
2390
MySQL   6635  2020-05-22 13:07 ~ 2020-05-22 16:05  
2389
MSSQL   21504  2020-05-12 19:46 ~ 2020-10-11 21:30  
2388
그누보드   7328  2020-04-17 17:14 ~ 2020-04-24 10:31  
2387
그누보드   5816  2020-04-04 18:58 ~ 2020-10-13 20:09  
열람
HTML   16291  2020-03-25 18:44 ~ 2021-09-23 18:51  
2385
그누보드   6510  2020-03-17 21:15 ~ 2020-03-17 21:16  
2384
영카트   4823  2020-03-17 19:13 ~ 2020-03-17 19:13  
2383
그누보드   35057  2020-03-17 19:08 ~ 2021-01-26 16:21  
2382
전자결제   7212  2020-03-15 13:27 ~ 2021-01-05 17:32  
2381
그누보드   7544  2020-03-14 12:03 ~ 2023-11-08 02:11  
2380
그누보드   7143  2020-03-09 20:44 ~ 2023-08-09 08:23  
2379
영카트   5108  2020-03-09 18:02  
2378
그누보드   5655  2020-03-06 01:26  
2377
PHP   6730  2020-03-04 14:51  
2376
그누보드   5281  2020-02-27 23:13  
2375
호스팅   6959  2020-02-26 22:32 ~ 2022-07-29 09:24  

검색

해피정닷컴 정보

회사소개 회사연혁 협력사 오시는길 서비스 이용약관 개인정보 처리방침

회사명: 해피정닷컴   대표: 정창용   전화: 070-7600-3500   팩스: 042-670-8272
주소: (34368) 대전시 대덕구 대화로 160 대전산업용재유통단지 1동 222호
개인정보보호책임자: 정창용   사업자번호: 119-05-36414
통신판매업신고: 제2024-대전대덕-0405호 [사업자등록확인]  
Copyright 2001~2024 해피정닷컴. All Rights Reserved.