19'C 흐림
서울 강남구
유튜브 동영상으로 강의용 게시판을 만들면서 커스텀한 플레이어 코드를 하나 공유합니다.
유튜브 자체 미디어바를 없애고 플레이어 부분을 좀 만졌습니다.
응용할 분은 알아서 사용하세요.
유튜브 아이디 대입 부분은 아이프레임에서 src 의 가장 마지막인 playlist=11자리문자열 입니다.
자동재생 무한반복으로 하나의 동영상을 걸었는데 자동재생은 상황에 따라 안 될 수도 있습니다.^^
<link href="https://fonts.googleapis.com/css2?family=Lato" rel="stylesheet">
<style>
#ytDiv { position:relative; padding-top:56.25%; overflow:hidden; background-color:#000000; }
#ytDiv iframe { display:block; position:absolute; top:0%; width:100%; height:100%; border:none; }
#ytDiv div:nth-of-type(1) { display:none; position:absolute;top:0%; width:100%;height:100%; }
#ytDiv div:nth-of-type(2) { position:absolute; top:0%; width:100%; height:40%; background:linear-gradient(#000000 30%, transparent); }
#ytDiv div:nth-of-type(3) { position:absolute; top:60%; width:100%; height:40%; background:linear-gradient(transparent, #000000 70%); }
#playerDiv { width:100%; height:50px; padding:0px 25px 0px 25px; display:none; justify-content:space-between; align-items:center; gap:15px; box-sizing:border-box; background:linear-gradient(#cccccc, #000000); }
.yt-button { color:#fae100; font-size:16px; font-family:Lato; font-weight:bold; cursor:pointer; }
.yt-timer { color:#ffffff; font-size:16px; font-family:Lato; }
#ytBar { display:block; width:100%; height:12px; cursor:pointer; appearance:none; }
#ytBar::-webkit-progress-bar { background-color:#eeeeee; border-radius:6px; border:1px solid #cccccc; }
#ytBar::-webkit-progress-value { background-color:#fae100; border-radius:6px; }
</style>
<div id="ytDiv">
<iframe src="//www.youtube.com/embed/?loop=1&vq=highres&enablejsapi=1&autoplay=1&playlist=fWNaR-rxAic" allow="autoplay"></iframe>
<div></div><div></div><div></div>
</div>
<div id="playerDiv">
<span class="yt-button" onclick="ytDiv.playVideo()">PLAY</span>
<span class="yt-timer">00:00</span>
<progress id="ytBar"></progress>
<span class="yt-timer">00:00</span>
<span class="yt-button" onclick="ytDiv.pauseVideo()">STOP</span>
</div>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
function onYouTubeIframeAPIReady() {
ytDiv = new YT.Player(ytDiv.querySelector("iframe"));
setInterval(() => {
if (ytDiv.getCurrentTime() > 0) {
document.querySelector("#ytDiv div").style.display = "block";
document.querySelectorAll("#ytDiv div")[1].style.display = document.querySelectorAll("#ytDiv div")[2].style.display = "none";
document.querySelector("#ytDiv iframe").style.top = "-150%";
document.querySelector("#ytDiv iframe").style.height = "400%";
playerDiv.style.display = "flex";
}
ytBar.value = Math.floor(ytDiv.getCurrentTime());
ytBar.max = Math.floor(ytDiv.getDuration());
document.querySelectorAll(".yt-timer")[0].innerText = ("0" + Math.floor(ytDiv.getCurrentTime() / 60)).slice(-2) + ":" + ("0" + Math.floor(ytDiv.getCurrentTime() % 60)).slice(-2);
document.querySelectorAll(".yt-timer")[1].innerText = ("0" + Math.floor(ytDiv.getDuration() / 60)).slice(-2) + ":" + ("0" + Math.floor(ytDiv.getDuration() % 60)).slice(-2);
}, 100);
}
ytBar.onclick = (e) => {
ytDiv.seekTo(e.offsetX * ytBar.max / ytBar.offsetWidth);
ytDiv.playVideo();
}
</script>
https://wittazzurri.com/editor/html_editor.php 에서 확인해 보세요.
주의사항은 중간에 광고 등이 나타나 끊기는 동영상은 다른 코드를 좀 추가해야 합니다.
원본은 https://www.youtube.com/watch?v=fWNaR-rxAic