비디오 갤러리 활성화(Video Gallery)

🎦 Video Gallery Easy Tutorials

안녕하세요 TriplexLab 입니다.
이번 시간에는 Video Gallery의 간단한 쉬운 예제를 가져왔습니다.

섬네일을 클릭하면 해당 영상이 활성화되어서 나오는것 입니다.

<div class="container">
		<h1>How To Make A Video Gallery</h1>
        <div class="row">
            <div class="col">
                <div class="feature-img">
                    <img src="media/pic1.png" alt="썸네일" class="thum">
                    <img src="media/play.png" alt="playICON" class="play-btn" data-path="media/vid1.mp4">
                </div>
            </div>
            <div class="col">
                <div class="small-img-row">
                    <div class="small-img">
                        <img src="media/pic2.png" alt="썸네일" class="thum">
                        <img src="media/play.png" alt="playICON" class="play-btn" data-path="media/vid2.mp4">
                    </div>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta maiores, accusamus eum voluptatem ipsam tempora</p>
                </div>
                <div class="small-img-row">
                    <div class="small-img">
                        <img src="media/pic3.png" alt="썸네일" class="thum">
                        <img src="media/play.png" alt="playICON" class="play-btn" data-path="media/vid3.mp4">
                    </div>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta maiores, accusamus eum voluptatem ipsam tempora</p>
                </div>
                <div class="small-img-row">
                    <div class="small-img">
                        <img src="media/pic4.png" alt="썸네일" class="thum">
                        <img src="media/play.png" alt="playICON" class="play-btn" data-path="media/vid4.mp4">
                    </div>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta maiores, accusamus eum voluptatem ipsam tempora</p>
                </div>
			</div>
		</div>
</div>
<div class="video-player" id="videoPlayer">
	<video width="100%" controls autoplay id="myVideo">
		<source src="media/vid1.mp4" type="video/mp4"/>
	</video>
	<img src="/media/close.png" alt="close" class="close-btn">
</div>

// css

*{
    margin: 0;
    padding: 0;
}

body{background-color: #2e8d86;}
.container{width:80%;margin:80px auto}
.container h1{padding:60px 0;color:#fff;font-size:44px;text-align:center;}
.row {display: flex;align-items: center; flex-wrap: wrap;}
.col {flex-basis: 50%; min-width: 250px;}
.feature-img {width: 83%; margin: auto; position: relative; border-radius: 6px; overflow: hidden;line-height: 0;}
.row .thum {width: 100%;}
.small-img-row {width: 85%; display: flex; background: #efefef; margin: 20px 0; align-items: center; border-radius: 6px; overflow: hidden; }
.small-img-row:first-child {margin-top: 0;}
.small-img-row:last-child {margin-bottom: 0;}
.small-img {position: relative; line-height: 0;}
.small-img .thum {width: 150px;}
.small-img-row p {padding: 0 20px ;color: #707070; line-height: 22px;font-size: 14px;}
.play-btn {width: 50px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); cursor: pointer;}
.video-player{width:80%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); display: none;}
video:focus {outline: none;}
.close-btn {width: 30px; position: absolute; top: 10px; right: 10px; cursor: pointer;}

(function(){
const closeBtn = document.querySelector('.close-btn');
const playBtn = Array.from(document.querySelectorAll('.play-btn'));
const videoPlayer = document.getElementById('videoPlayer');
const myVideo = document.getElementById('myVideo');

  playBtn.forEach(function(el, idx){
      el.addEventListener('click', function() {
          const vidPath = this.dataset.path;
          myVideo.src = vidPath;
          videoPlayer.style.display = 'block';
      });
  });

  closeBtn.addEventListener('click', function(){
      videoPlayer.style.display = 'none';
  });
})();

위에 코드 간단한 테스트를 해보고 싶으신 분들은 다운로드 받으세요👇👇
(영상 mp4 파일이 있다보니 압축파일이 용량이 커서 구글 드라이브 파일에 올려놨습니다.
다운로드 받아 가셔도 아무런 문제가 없습니다.)

다운로드 📥

 

비디오 갤러리 활성화(Video Gallery) 결과