2026, 새로운 도약을 시작합니다.

유튜브 제목 자동 입력 JS + PHP 폼 자동 제출

유튜브 게시판에 일일이 제목, 주소 넣기 귀잖아서 만들어 보았습니다.

wr_1 여분 필더를 유튜브 주소로 사용한다는 가정으로 작성된 소스입니다.

wr_1에 유튜브 URL만 입력 하면 글쓰기 끝^^

wr_1에 유튜브 URL 입력 → 해당 영상의 제목이 wr_subject에 자동입력 → 1초후 자동 제출
1️⃣ PHP: 아래소스를 youtube_sub.php 로 저장해 주세요.(제목 자동 추출용)

[code]$apiKey = 'YOUR_YOUTUBE_API_KEY'; // 실제 YouTube API 키로 변경

$videoId = isset($_GET['id']) ? $_GET['id'] : '';

header('Content-Type: application/json');

if(!$videoId) {
    echo json_encode(['title'=>'']);
    exit;
}

// YouTube API URL
$url = "https://www.googleapis.com/youtube/v3/videos?id={$videoId}&key={$apiKey}&part=snippet";

// curl 호출
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$response = curl_exec($ch);
curl_close($ch);

$data = json_decode($response, true);

$title = '';
if(!empty($data['items'][0]['snippet']['title'])) {
    $title = $data['items'][0]['snippet']['title'];
}

echo json_encode(['title'=>$title]);[/code]

2️⃣ JS: wr_1 입력 시 제목 자동 입력 + 1초 후 제출

(wr_1 을 유튜브 주소로 사용 가정, 사용하는 스킨 write.skin.php 하단에 아래스크립트 추가)

[code]<script>
(function(){
  let submitTimer = null;

  // 유튜브 URL에서 videoId 추출 (11자리 기준)
  function getYoutubeVideoId(url) {
    url = url.replace(/\s+/g, ''); // 공백 제거
    const regExp = /(?:youtube\.com\/(?:watch\?.*v=|embed\/|shorts\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
    const match = url.match(regExp);
    return match ? match[1] : null;
  }

  async function handleWr1Input() {
    const wr1 = document.getElementById('wr_1');
    const subj = document.getElementById('wr_subject');
    const btn = document.getElementById('btn_submit');
    if(!wr1 || !subj || !btn) return;

    const url = wr1.value.trim();
    const videoId = getYoutubeVideoId(url);

    // 유튜브 URL이 아니면 종료
    if(!videoId) return;

    try {
      const res = await fetch(`youtube_sub.php?id=${videoId}`);
      const data = await res.json();
      if(data.title) {
        subj.value = data.title;

        // 이전 타이머 취소 후 새로 설정
        if(submitTimer) clearTimeout(submitTimer);
        submitTimer = setTimeout(() => {
          if(subj.value === data.title) {
            btn.dispatchEvent(new MouseEvent('click', {
              bubbles: true,
              cancelable: true,
              view: window
            }));
          }
        }, 1000); // 1초 후 자동 제출
      }
    } catch(e) {
      console.error(e);
    }
  }

  document.addEventListener('DOMContentLoaded', () => {
    const wr1 = document.getElementById('wr_1');
    if(!wr1) return;
    wr1.addEventListener('input', handleWr1Input);
  });
})();
</script>[/code]
1. 사용자가 wr_1에 유튜브 URL 입력
2. PHP에서 YouTube Data API 호출 → 영상 제목 가져오기
3. JS에서 결과 받아 wr_subject에 자동 입력
4, 1초 후 자동 제출 (onsubmit 검증 포함)
5. API Key는 서버에만 존재 → 브라우저에 노출되지 않음
6. 유튜브 URL 형식 지원
    https://www.youtube.com/watch?v=VIDEOID
    https://youtu.be/VIDEOID
    https://www.youtube.com/embed/VIDEOID
    https://www.youtube.com/shorts/VIDEOID
7. 유튜브 URL만 감지
    videoId 추출에 실패하면 스크립트 실행 중단

미리보기: https://xpx.kr/home/youtube

|

댓글 3개

감사합니다 ^^

감사합니다 ^^

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

그누보드5 팁자료실

번호 제목 글쓴이 날짜 조회
공지 3년 전 조회 4,593
2711 2개월 전 조회 323
2710 2개월 전 조회 225
2709 2개월 전 조회 392
2708 2개월 전 조회 231
2707 2개월 전 조회 274
2706 2개월 전 조회 273
2705 2개월 전 조회 144
2704 2개월 전 조회 295
2703 2개월 전 조회 267
2702 2개월 전 조회 281
2701 2개월 전 조회 278
2700 2개월 전 조회 224
2699 2개월 전 조회 172
2698 2개월 전 조회 221
2697 2개월 전 조회 191
2696 2개월 전 조회 164
2695 3개월 전 조회 321
2694 3개월 전 조회 160
2693 3개월 전 조회 214
2692 3개월 전 조회 219
2691 3개월 전 조회 364
2690 3개월 전 조회 269
2689 3개월 전 조회 290
2688 3개월 전 조회 239
2687 3개월 전 조회 451
2686 3개월 전 조회 503
2685 3개월 전 조회 634
2684 3개월 전 조회 371
2683 3개월 전 조회 512
2682 3개월 전 조회 325
🐛 버그신고