그누보드 - 유튜브 반응형 커스텀 플레이어 - 상하좌우 절단

유튜브 반응형 커스텀 플레이어 - 상하좌우 절단 > 그누보드5 팁자료실

그누보드5 팁자료실

유튜브 반응형 커스텀 플레이어 - 상하좌우 절단 정보

유튜브 반응형 커스텀 플레이어 - 상하좌우 절단

본문

https://sir.kr/g5_tip/19654 의 자바스크립트 오류를 수정하면서 검은 뻘여백이 있는 유튜브 동영상의 검은 뻘여백을 절단하는 방법입니다.

----------

상하 뻘여백 절단


<link href="https://fonts.googleapis.com/css2?family=Lato" rel="stylesheet">
<style>
#ytDiv { position:relative; padding-top:42%; 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=ZHUQwXHjSQg" 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>

원본 유튜브 - https://www.youtube.com/watch?v=ZHUQwXHjSQg

----------

좌우 또는 상하좌우 뻘여백 절단


<link href="https://fonts.googleapis.com/css2?family=Lato" rel="stylesheet">
<style>
#ytDiv { position:relative; padding-top:70%; overflow:hidden; background-color:#000000; }
#ytDiv iframe { display:block; position:absolute; top:0%; left:50%; transform:translate(-50%); width:132%; 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=0k2Zzkw_-0I" 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>

원본 유튜브 - https://www.youtube.com/watch?v=0k2Zzkw_-0I

----------

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

뻘여백이 없는 유튜브는 빨간부분이 56.25 와 100 으로 되어 있습니다.

이 2개의 수치를 조절하여 뻘여백을 절단해 주면 되겠습니다.

#ytDiv { position:relative; padding-top:56.26%; overflow:hidden; background-color:#000000; }
#ytDiv iframe { display:block; position:absolute; top:0%; left:50%; transform:translate(-50%); width:100%; height:100%; border:none; }