[2] - [ 2023 년 01월 19일 코드 업데이트 ]

setInterval 과 getCurrentTime() 이 충돌하는 오류를 수정하였습니다.

[1] - [ 2023 년 01월 01일 코드 업데이트 ]

@스펀지둘님이 댓글에서 제기한 부분을 수정하였습니다.

---------------------

이번에 유튜브 동영상으로 강의용 게시판을 만들면서 커스텀한 플레이어 코드를 하나 공유합니다.

유튜브 자체 미디어바를 없애고 플레이어 부분을 좀 만졌습니다.

응용할 분은 알아서 사용하세요.

유튜브 아이디 대입 부분은 아이프레임에서 src 의 가장 마지막인 playlist=11자리문자열 입니다.

자동재생 무한반복으로 하나의 동영상을 걸었는데 자동재생은 상황에 따라 안 될 수도 있습니다.^^

[code]

<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%; left:50%; transform:translate(-50%); 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"), { events: {"onStateChange":onPlayerStateChange} });
}
function onPlayerStateChange(event) {
    if (event.data === 1) {
        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.max = Math.floor(ytDiv.getDuration());
        document.querySelectorAll(".yt-timer")[1].innerText = ("0" + Math.floor(ytDiv.getDuration() / 60)).slice(-2) + ":" + ("0" + Math.floor(ytDiv.getDuration() % 60)).slice(-2);
        setInterval(() => {
            ytBar.value = Math.floor(ytDiv.getCurrentTime());
            document.querySelectorAll(".yt-timer")[0].innerText = ("0" + Math.floor(ytDiv.getCurrentTime() / 60)).slice(-2) + ":" + ("0" + Math.floor(ytDiv.getCurrentTime() % 60)).slice(-2);
        }, 500);
    }
}
ytBar.onclick = (e) => {
    ytDiv.seekTo(e.offsetX * ytBar.max / ytBar.offsetWidth);
    ytDiv.playVideo();
}
</script>

[/code]

https://wittazzurri.com/editor/html_editor.php 에서 확인해 보세요.

주의사항은 중간에 광고 등이 나타나 끊기는 동영상은 다른 코드를 좀 추가해야 합니다.

원본은 https://www.youtube.com/watch?v=fWNaR-rxAic 입니다.