게시글 유튜브링크 자동으로 아이프레임으로 변환하기

제 스킨이나 플러그인을 보면...

게시글에 유튜브 url 입력이 걸린 링크를 자동으로 아이프레임 동영상으로 바꿔주는 것을 꽤 많이 보았을 것입니다.

그누순정의 게시글은 bo_v_con 이라는 아이디를 가진 div 에 감겨져 있습니다.

그래서 아래와 같은 형태가 됩니다.

[code]

<div id="bo_v_con">
<a href="https://www.youtube.com/watch?v=T2ZNOZmdD-E" target="_blank">https://www.youtube.com/watch?v=T2ZNOZmdD-E</a>
<br>
<a href="https://sir.kr/" target="_blank">https://sir.kr/</a>
<br>
<a href="https://www.youtube.com/watch?v=wGIAfuL3FMg" target="_blank">https://www.youtube.com/watch?v=wGIAfuL3FMg</a>
<br>
<a href="https://www.youtube.com/watch?v=Km71Rr9K-Bw" target="_blank">https://www.youtube.com/watch?v=Km71Rr9K-Bw</a>
</div>

[/code]

view.skin.php 의 하단에 아래의 자바스크립트를 추가합니다.

이렇게 추가를 해 주면 유튜브 이외의 링크는 그냥 일반링크로 표기되고 유튜브링크만 아이프레임으로 바뀝니다.

당연히 반응형입니다.

[code]

<style>
#bo_v_con iframe[src*='//www.youtube.com/'] { display:block; aspect-ratio:16/9; width:100%; border:none; margin:0 auto; }
</style>
<script>
for (i of document.querySelectorAll("#bo_v_con a[href*='//www.youtube.com/']")) {
    i.outerHTML = "<iframe src='https://www.youtube.com/embed/" + i.href.slice(-11) + "'></iframe>";
}
</script>

[/code]

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

댓글란도 똑같습니다. 댓글란을 싸고 있는 div 의 id 나 class 를 물고 늘어져서 동일한 패턴으로 코드작성을 해 줍니다.

제 스킨이나 팁을 가져가서 사용하고 배포하는 것은 그러려니 하는데 도움이 되셨으면 감사멘트 한 줄이라도 부탁드립니다.^^