Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

moozi

modal video fullscreen 본문

TIS_2016/HTML5_1기

modal video fullscreen

moozi 2016. 3. 31. 18:11

<!DOCTYPE html>

<html>

<head>

<style>

/* The Modal (background) */

.modal {

    display: none; /* Hidden by default */

    position: fixed; /* Stay in place */

    z-index: 1; /* Sit on top */    

    left: 0;

    top: 0;

    width: 100%; /* Full width */

    height: 100%; /* Full height */

    overflow: auto; /* Enable scroll if needed */

    background-color: rgb(0,0,0); /* Fallback color */

    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}


/* Modal Content */

.modal-content {

    background-color: #fefefe;

    margin: auto;

    z-index: 3;

    border: 1px solid #888;

    width: 100%;

    height: 100%;

}


/* The Close Button */

.close {

    position:absolute;

    color: #aaaaaa;

    right: 0;

    font-size: 28px;

    font-weight: bold;

    z-index: 10;

    opacity: 0.7;

    

}


.close:hover,

.close:focus {

    color: #000;

    text-decoration: none;

    cursor: pointer;

}

    

    /* 동영상에 적용하는 클래스. 시작 -------------------------------------- */

.vid { 

    width:100%; /* 가로 - 풀사이즈 */

    height:100%; /* 세로 - 풀사이즈 */

    position:fixed; /* 위치 고정 */

    margin:0;

    padding:0;

    left:0px; /* 왼쪽은 처음위치부터 시작 */

    opacity:0.9; /* 투명도 90% */

}


/* vid클래스 안의 video에 적용 */

.vid video { 

    width:100%; /* 가로 100% */

    

}

/* 동영상에 적용하는 클래스. 끝 -------------------------------------- */

</style>

</head>

<body>


<h2>Modal Example</h2>


<!-- Trigger/Open The Modal -->

<button id="myBtn">Open Modal</button>


<!-- The Modal -->

<div id="myModal" class="modal">


  <!-- Modal content -->

  <div class="modal-content">

    <span class="close">X</span>

    <figure class="vid">

        <!-- 동영상플레이. 자동. 무한반복 --------------->

<video  loop="loop" autoplay="autoplay">

<source src="img/nike.mp4" type="video/mp4" />

</video>

</figure>

  </div>


</div>


<script>

// Get the modal

var modal = document.getElementById('myModal');


// Get the button that opens the modal

var btn = document.getElementById("myBtn");


// Get the <span> element that closes the modal

var span = document.getElementsByClassName("close")[0];


// When the user clicks the button, open the modal 

btn.onclick = function() {

    modal.style.display = "block";

}


// When the user clicks on <span> (x), close the modal

span.onclick = function() {

    modal.style.display = "none";

}


// When the user clicks anywhere outside of the modal, close it

window.onclick = function(event) {

    if (event.target == modal) {

        modal.style.display = "none";

    }

}

</script>


</body>

</html>



'TIS_2016 > HTML5_1기' 카테고리의 다른 글

부트스트랩에서 navbar 배경색 바꾸기  (0) 2016.04.04
4/2 slide javascript  (0) 2016.04.01
3/29 html코드  (0) 2016.03.29
3/29 css코드  (0) 2016.03.29
css로 애니메이션 구현 예제  (0) 2016.03.29
'TIS_2016/HTML5_1기' Related Articles more
Comments