본문 바로가기
  • 커뮤니티
  • 북마크
Front-end/Javascript

[javascript]유튜브 탭메뉴 별로 다르게 호출 (반응형포함)

by 빽짱구 2022. 12. 2.
반응형

하나의 영역에서 탭을 누르면 유튜브 영상이 탭별로 다르게 노출되게 하는 방법입니다.

 

먼저 script 를 <head>와 </head> 사이에 삽입합니다.

 

// youtube
function getVidID(param) {
    var r = /(?:watch\?v=(.*)|youtu\.be\/(.*))/g;
    var match = r.exec(param);
    return match[1] ? match[1] : match[2];
}
var frameBase = '<iframe src="https://www.youtube.com/embed/{{replace}}?rel=0&vq=highres&autoplay=1&autohide=1&controls=1&loop=1" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>';
var vidObj = [
    "https://youtu.be/ktmvMZyVzWk", // data-idx 0 주소
    "https://youtu.be/Decc1Apa-bU", // data-idx 1 주소
    "https://youtu.be/DRJBGE-Zqj8", // data-idx 2 주소
    "https://youtu.be/mJMSj3vWZ9g", // data-idx 3 주소
    "https://youtu.be/D6W2-PKWvPk" // data-idx 4 주소
];
document.addEventListener("DOMContentLoaded", function() {
    var eles = document.getElementsByClassName("youtube_vod");
    for (let i = 0; i < eles.length; i++) {
        const ele = eles[i];
        ele.addEventListener('click', function() {
            console.log(this.getAttribute('data-idx'));
            const idx = parseInt(this.getAttribute('data-idx', 6)); // youtube data-idx 총갯수
            const html = vidObj[idx];
            document.getElementById('youtube_vid').innerHTML = frameBase.replace('{{replace}}', getVidID(html));
        });
    }
});

 

html 코드는 다음과 같습니다.

 

<div class="youtube-container">
    <div class="youtube_vid" id="youtube_vid">
        <iframe src="https://www.youtube.com/embed/ktmvMZyVzWk?rel=0&vq=highres&autohide=1&controls=1&loop=1" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
    </div>
    <div class="youtube_box">
        <div class="youtube_vod" data-idx="0">
            유튜브 영상1
        </div>
        <div class="youtube_vod" data-idx="1">
            유튜브 영상2
        </div>
        <div class="youtube_vod" data-idx="2">
            유튜브 영상3
        </div>
        <div class="youtube_vod" data-idx="3">
            유튜브 영상4
        </div>
        <div class="youtube_vod" data-idx="4">
            유튜브 영상5
        </div>
    </div>
</div>

 

유튜브 반응형 처리를 위해 CSS 를 작성합니다.

 

.youtube-container{overflow:hidden}
.youtube-container .youtube_vid{position:relative;width:100%;height:auto;padding-top:50%} /* 반응형 처리 */
.youtube-container iframe{width:100%;height:100%;position:absolute;top:0;left:0;z-index:1} /* 반응형 처리 */
.youtube-container .youtube_box{display:flex;justify-content: center;cursor:pointer;margin-top:20px;}
.youtube-container .youtube_box .youtube_vod{width:20%;margin:0 5px;padding:10px 15px;color:#fff;background:#444;border-radius:10px;text-align:center}
.youtube-container .youtube_box .youtube_vod:hover{background:#000}

 

반응형 처리 된곳은 참고하시고, 나머지 부분은 원하는 스타일로 수정해주시면 됩니다.

 

미리보기

https://codepen.io/webmini/pen/VwdVpvP

 

유튜브 탭메뉴 별로 다르게 호출 (반응형포함)

...

codepen.io

 

반응형

댓글0[댓글정책]