I'm

Developer, Designer, Photographer

GET IN TOUCH

  • Buk-gu, Busan, Republic of Korea
  • ungdoli0916@naver.com
  • Kakao ID : Ungdoli
Your message has been sent. Thank you!
(즐거웅코드) 제이쿼리 동영상 16:9 사이즈 모달로 띄우기

· 즐거'웅' 코드 (Source)/HTML & CSS & JAVASCRIPT
2021. 8. 22. 22:53

반응형

[즐거'웅'코드] 목차

  1. 예제 소스
  2. 구현 예시
예제 소스
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
 
<style>
    .video_content { position: fixed; border: 1px solid #dddddd; visibility: hidden; padding: 20px; opacity: 0; transition: all .3s ease; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #ffffff; max-width: 800px; width: 100%; box-sizing: border-box; z-index: 11; }
    .video_content.show { visibility: visible; opacity: 1; }
    .video_content .video_close_btn { position: absolute; right: 0; top: -100px; font-size: 60px; color: #ffffff; cursor: pointer; }
    .video_content_bg { visibility: hidden; opacity: 0; position: fixed; width: 100%; height: 100%; left: 0; bottom: 0; background: rgba(0, 0, 0, .9); z-index: 10; }
    .video_content_bg.show { visibility: visible;  opacity: 1; }
 
    @media screen and (max-width: 768px) {
        .video_content { width: 90%; }
        .video_content .video_close_btn { top: -90px; }
    }
</style>
 
<button class="video_play_btn">영상보기</button>
 
<div class="video_content">
    <span class="video_close_btn">&Cross;</span>
    <div class="video_obj"></div>
</div>
 
<div class="video_content_bg"></div>
 
<script>
    $(".video_play_btn").click(function () {
        $(".video_obj").html('<iframe src="(url)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>');
 
        $(".video_content").addClass('show');
        $(".video_content_bg").addClass('show');
 
        $("iframe").each(function () {
            $(this).css("width", "100%");
            $(this).css("height", Math.ceil(parseInt($(this).css("width")) * 480 / 854) + "px");
        });
    });
 
    $(".video_close_btn, .video_content_bg").click(function () {
        $(".video_obj iframe").remove();
        $('.video_content').removeClass('show');
        $('.video_content_bg').removeClass('show');
    });
</script>
구현 예시
반응형
저작자표시

'· 즐거'웅' 코드 (Source) > HTML & CSS & JAVASCRIPT' 카테고리의 다른 글

(즐거웅코드) 자바스크립트 동영상 음소거하기  (0) 2021.08.24
(즐거웅코드) 자바스크립트 영상 끝났을 때 이벤트 실행하기  (0) 2021.08.23
(즐거웅코드) 제이쿼리 랜덤 위치에 객체 생성하기  (0) 2021.08.21
(즐거웅코드) CSS 상하 반전 시키기 (세로로 뒤집기)  (0) 2021.08.20
(즐거웅코드) CSS 좌우 반전 시키기 (가로로 뒤집기)  (0) 2021.08.19

관련글

댓글 0

티스토리툴바