게시글 유튜브링크 자동으로 아이프레임으로 변환하기
제 스킨이나 플러그인을 보면...
게시글에 유튜브 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 를 물고 늘어져서 동일한 패턴으로 코드작성을 해 줍니다.
제 스킨이나 팁을 가져가서 사용하고 배포하는 것은 그러려니 하는데 도움이 되셨으면 감사멘트 한 줄이라도 부탁드립니다.^^
댓글 16개
감사합니다:)
@Tak2
감사합니다
좋은 팁 감사 합니다.
@들레아빠
찬찬히 뜯어보면 별것도 아닙니다.
비타주리님의 스킨과 팁을 많이 기다린 사람입니다.
고맙습니다 ^^
@김철용
아이고 이거 어쩌죠? 철용님 기대를 충족시켜드릴 만큼의 능력도 열정도 예전같지가 않네요.
감사합니다 ^^
@민트다이어리 감사합니다
감사합니다
@너나잘해 감사합니다
감사합니다:)
@푸우니 감사합니다
많은 부분에 유용하게 적용이 가능할 것 같습니다
감사합니다^^
@미키손 감사합니다
잘 활용해 보겠습니다~
@tawaki 감사합니다
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4402 | ||
| 2574 | 10개월 전 | 560 | ||
| 2573 | 10개월 전 | 937 | ||
| 2572 |
두리삼촌v
|
10개월 전 | 606 | |
| 2571 | 10개월 전 | 555 | ||
| 2570 | 10개월 전 | 598 | ||
| 2569 |
두리삼촌v
|
10개월 전 | 636 | |
| 2568 |
두리삼촌v
|
10개월 전 | 665 | |
| 2567 |
두리삼촌v
|
10개월 전 | 460 | |
| 2566 |
두리삼촌v
|
10개월 전 | 441 | |
| 2565 | 10개월 전 | 738 | ||
| 2564 | 10개월 전 | 666 | ||
| 2563 | 10개월 전 | 472 | ||
| 2562 | 10개월 전 | 1028 | ||
| 2561 |
 수평선1203 |
10개월 전 | 674 | |
| 2560 | 10개월 전 | 917 | ||
| 2559 | 10개월 전 | 655 | ||
| 2558 |
 간장게장같은남자 |
10개월 전 | 503 | |
| 2557 | 10개월 전 | 656 | ||
| 2556 | 11개월 전 | 953 | ||
| 2555 | 11개월 전 | 1334 | ||
| 2554 | 11개월 전 | 751 | ||
| 2553 |
수평선1203 |
11개월 전 | 744 | |
| 2552 | 11개월 전 | 673 | ||
| 2551 | 11개월 전 | 863 | ||
| 2550 | 11개월 전 | 765 | ||
| 2549 |
 dkstmdc |
11개월 전 | 716 | |
| 2548 | 11개월 전 | 1028 | ||
| 2547 | 11개월 전 | 669 | ||
| 2546 | 11개월 전 | 1203 | ||
| 2545 | 11개월 전 | 660 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기