http://wittazzurri.phps.kr/main/js_hook/2

 

오늘 지한님 라이믹스 소식 - https://sir.kr/cm_free/1705422

에서 유튜브 정보 하나를 득템했네요. 윤삼님 감사요 - https://rhymix.org/free/1852364

 

제가 미디어라면 환장하는 수준이라 바로 이미지에서 자동으로 일반비율과 쇼츠비율을 분기하는 코드를 빼서 게시글로 올려 보았습니다.

 

----------

 

<img src="https://i.ytimg.com/vi/HwAjty0pdZk/frame0.jpg">
<img src="https://i.ytimg.com/vi/okGctSoD0VU/frame0.jpg">

 

----------

 

위와 같이 이미지태그를 게시글에 적어주구요.

view.skin.php 하단에는 아래처럼 해 주었습니다. 이미지개수는 몇개라도 상관이 없습니다.

일반비율과 쇼츠비율을 이미지에서 판별하여 아이프레임 태그로 문자열을 치환합니다.

 

----------

 

<style>
iframe[src*='www.youtube.com/'] { display:block; border:none; margin:0 auto; }
</style>
<script>
for (yt of document.querySelectorAll("img[src*='i.ytimg.com/']")) {
    yt.onload = function() {
        this.widthPercent = "width:" + (this.offsetWidth > this.offsetHeight ? 100 : 70) + "%;";
        this.widthPixel = "max-width:" + (this.offsetWidth > this.offsetHeight ? 960 : 540) + "px;";
        this.whRatio = "aspect-ratio:" + (this.offsetWidth > this.offsetHeight ? "16/9" : "9/16");
        this.outerHTML ="<iframe style='" + this.widthPercent + this.widthPixel + this.whRatio + "' src='https://www.youtube.com/embed/" + this.src.split("/vi/")[1].slice(0, 11) + "' allowfullscreen></iframe>";
    }
}
</script>

 

----------

----------

 

바로 확인하고 싶다면

 

https://wittazzurri.com/editor/html_editor.php 를 열어서 아래 코드를 넣고 확인해 보세요.

 

<img src="https://i.ytimg.com/vi/HwAjty0pdZk/frame0.jpg">
<br>
<img src="https://i.ytimg.com/vi/okGctSoD0VU/frame0.jpg">

<style>
iframe[src*='www.youtube.com/'] { display:block; border:none; margin:0 auto; }
</style>
<script>
for (yt of document.querySelectorAll("img[src*='i.ytimg.com/']")) {
    yt.onload = function() {
        this.widthPercent = "width:" + (this.offsetWidth > this.offsetHeight ? 100 : 70) + "%;";
        this.widthPixel = "max-width:" + (this.offsetWidth > this.offsetHeight ? 960 : 540) + "px;";
        this.whRatio = "aspect-ratio:" + (this.offsetWidth > this.offsetHeight ? "16/9" : "9/16");
        this.outerHTML ="<iframe style='" + this.widthPercent + this.widthPixel + this.whRatio + "' src='https://www.youtube.com/embed/" + this.src.split("/vi/")[1].slice(0, 11) + "' allowfullscreen></iframe>";
    }
}
</script>