유튜브 링크 표현
이 코드를view.skin.php에 추가하세요
[code]<script>
// bo_v_con 요소 선택
const boVCon = document.getElementById('bo_v_con');
// 유튜브 링크 형식 정의
const youtubeDomains = [
'youtube.com',
'youtu.be',
];
// 정규 표현식 생성
const youtubeRegex = new RegExp(`(https?://)?(${youtubeDomains.join('|')})/(shorts/|watch\\?v=|)([\\w-]+)`, 'g');
// bo_v_con의 텍스트를 가져와서 링크를 검색
let textContent = boVCon.innerHTML;
// 링크가 발견되면 object 요소를 생성
const matches = textContent.match(youtubeRegex);
if (matches) {
// 중복 제거를 위한 Set 사용
const uniqueLinks = Array.from(new Set(matches));
uniqueLinks.forEach(link => {
let videoId = '';
// 링크에 따라 videoId를 추출
if (link.includes('youtu.be')) {
videoId = link.split('/').pop(); // youtu.be 링크에서 videoId 추출
} else if (link.includes('youtube.com')) {
const url = new URL(link);
if (url.pathname.includes('shorts')) {
videoId = url.pathname.split('/').pop(); // shorts 링크에서 videoId 추출
} else if (url.searchParams.has('v')) {
videoId = url.searchParams.get('v'); // watch?v= 링크에서 videoId 추출
} else {
videoId = url.pathname.split('/').pop(); // 기본 링크에서 videoId 추출
}
}
// videoId가 유효한 경우에만 iframe 요소 생성
if (videoId) {
// iframe 요소 생성
const videoContainer = `<div class="video-container" style="text-align: center;">
<iframe width="100%" height="500" src="https://www.youtube.com/embed/${videoId}" allowfullscreen></iframe>
</div>`;
// 기존 콘텐츠에서 해당 링크를 비디오 요소로 교체
const safeLink = link.replace(/[-\/\\^$.*+?()[\]{}|]/g, '\\$&'); // 링크를 안전하게 변환
textContent = textContent.replace(new RegExp(`(?:<a[^>]*>)?${safeLink}(?:<\/a>)?`, 'g'), videoContainer); // 링크를 videoContainer로 교체
}
});
// bo_v_con의 내용을 업데이트
boVCon.innerHTML = textContent; // 업데이트된 내용을 bovcon에 설정
}
</script>[/code]
참고자료: http://1004web.kr/board_ujsG12/96855
뤼튼이 다 떠먹여줬습니다 :)
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 2695 | 1개월 전 | 170 | ||
| 2694 | 1개월 전 | 132 | ||
| 2693 | 1개월 전 | 143 | ||
| 2692 | 1개월 전 | 157 | ||
| 2691 | 1개월 전 | 311 | ||
| 2690 | 1개월 전 | 217 | ||
| 2689 |
|
1개월 전 | 423 | |
| 2688 | 1개월 전 | 275 | ||
| 2687 |
선택과집중
|
1개월 전 | 312 | |
| 2686 | 1개월 전 | 275 | ||
| 2685 | 1개월 전 | 329 | ||
| 2684 | 2개월 전 | 462 | ||
| 2683 | 2개월 전 | 261 | ||
| 2682 | 2개월 전 | 287 | ||
| 2681 |
선택과집중
|
2개월 전 | 263 | |
| 2680 | 2개월 전 | 312 | ||
| 2679 |
|
2개월 전 | 417 | |
| 2678 |
|
2개월 전 | 487 | |
| 2677 | 2개월 전 | 311 | ||
| 2676 | 2개월 전 | 287 | ||
| 2675 |
선택과집중
|
2개월 전 | 464 | |
| 2674 |
|
2개월 전 | 309 | |
| 2673 | 2개월 전 | 322 | ||
| 2672 | 2개월 전 | 272 | ||
| 2671 | 2개월 전 | 244 | ||
| 2670 | 2개월 전 | 356 | ||
| 2669 | 2개월 전 | 274 | ||
| 2668 |
선택과집중
|
2개월 전 | 470 | |
| 2667 |
선택과집중
|
2개월 전 | 455 | |
| 2666 |
선택과집중
|
3개월 전 | 388 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기