유튜브 반응형 커스텀 플레이어 - 상하좌우 절단 정보
유튜브 반응형 커스텀 플레이어 - 상하좌우 절단본문
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; }
!-->!-->
추천
5
5
댓글 8개
군더더기 없이 깨끗해서 좋아요.
@들레아빠 감사합니다. 풀스크린 코드를 붙여야 하는데 어느 위치에 붙일지 고민 중입니다.ㅋ
깔끔하네요. ^^
@민트다이어리 예 유용하게 사용하세요.
선 스크랩 후 감상해야겠네요 ^^
감사합니다
감사합니다
@예뜨락 깔끔감상이 가능합니다.
좋아요^^
감사합니다.
감사합니다.
@푸른산타
레벨유지를 위한 몸부림입니다.ㅋ
레벨유지를 위한 몸부림입니다.ㅋ