JAVASCRIPT - 2023. 12. 2.
유튜브 영상 렌덤으로 보이기
- -
👉🏻유튜브 영상 렌덤으로 보이기
안녕하세요 트리플랩(TriplexLab) 입니다.
이번에는 흔하게 많이들 작업하시는 유튜브 영상을 렌덤으로 보이기 기능에 대해서 살펴보겠습니다.
👉🏻HTML 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>유튜브 영상 렌덤으로 보이기</title>
</head>
<body>
<div class="global">
<div class="center">
<a href="#0">유튜브 영상 렌덤으로 보이기</a>
</div>
<div class="iframe-inner">
<!-- 유튜브 영상 동적 삽입 -->
</div>
</div>
<script type="module" src="./index.js"></script>
</body>
</html>👉🏻CSS 코드
html,body {margin: 0; padding: 0;}
.global.active::before {
display: inline-block;
content: '';
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
position: absolute;
}
.close-btn {
width: 30px;
position: absolute;
right: 0px;
top: -50px;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #000;
border-radius: 20rem;
box-shadow: 0px 1px 3px rgba(0,0,0,0.1);
transition: 0.3s;
}
.center:hover {
box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.15);
transform: translate(-50%, -54%);
}
.center a {
color: inherit;
text-decoration: none;
padding: 16px 20px;
display: inline-block;
}
.iframe-inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding-top: 22%;
width: 40%;
height: 0;
display: none;
}
.iframe-inner.active {
display: block;
}
.iframe-inner > iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}👉🏻JS 코드
아래 코드 블럭에서 주석을 보시면 이해하는데 도움이 될것 입니다.
embedId배열에 고유한 embed값들을 추가 하면 됩니다.
embed은 유튜브에서 "공유 > 퍼가기" 버튼에서 iframe 태그상에서 속성으로 확인 할수 있습니다.
(() => {
const globalbg = document.querySelector(".global");
const center = document.querySelector(".center");
const iframeinner = document.querySelector(".iframe-inner");
const embedId = [
"3v7tCmicvzw?si=_ky4ZdjgBIJXtnLK",
"U-43VLjiyoc?si=kcCydJIMrYslYVUC",
"Ldla2VnvgbA?si=0GdfRtkvp0wSHtpQ",
"sCeVHKM1l54?si=8YZH2O_HTCewBzzr",
];
let lastEmbedId = null;
// 한번 노출된 영상은 연속으로 노출이 안되게 할려는 함수.
const getRandomEmbedId = () => {
// lastEmbedId와 같지 않은 요소들만 추출합니다.
const filteredEmbedId = embedId.filter((id) => id !== lastEmbedId);
// filteredEmbedId 배열에서 랜덤하게 한 요소를 선택합니다.
const newEmbedId =
filteredEmbedId[Math.floor(Math.random() * filteredEmbedId.length)];
// 선택한 요소를 기억합니다.
lastEmbedId = newEmbedId;
return newEmbedId;
};
const randomTemplate = () => {
const randomEmbedId = getRandomEmbedId();
const iframeTemplate = `
<iframe
src="https://www.youtube.com/embed/${randomEmbedId}"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
<img src="./imgs/close.png" alt="닫기" class="close-btn" />
`;
return iframeTemplate;
};
center.addEventListener("click", () => {
globalbg.classList.add("active");
iframeinner.classList.add("active");
iframeinner.innerHTML = randomTemplate();
});
iframeinner.addEventListener("click", () => {
globalbg.classList.remove("active");
iframeinner.classList.remove("active");
iframeinner.innerHTML = "";
});
})();👉🏻부가 설명
getRandomEmbedId함수는 한번 노출된 영상은 두번 연속으로 노출안되게 하기 위해서 만든 함수 입니다.
lastEmbedId에 마지막으로 노출한 embedId 값을 기억해서 filteredEmbedId에서 걸러 냅니다.
차근차근 코드의 흐름을 이해 해보시기 바랍니다.👏✅😃👍🏻
👉🏻결과확인
유튜브 영상 렌덤으로 보이기
younhoso.github.io
Contents
소중한 공감 감사합니다