하나의 영역에서 탭을 누르면 유튜브 영상이 탭별로 다르게 노출되게 하는 방법입니다.
먼저 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}
반응형 처리 된곳은 참고하시고, 나머지 부분은 원하는 스타일로 수정해주시면 됩니다.
See the Pen 유튜브 탭메뉴 별로 다르게 호출 (반응형포함) by webmini (@webmini) on CodePen.
미리보기
https://codepen.io/webmini/pen/VwdVpvP
유튜브 탭메뉴 별로 다르게 호출 (반응형포함)
...
codepen.io
728x90