📖
그누보드5 유튜브 제목 자동 입력 JS + PHP 폼 자동 제출
페이지 정보
본문
wr_1에 유튜브 URL 입력 → 해당 영상의 제목을 자동으로 wr_subject에 자동입력 → 1초후 자동 제출
1️⃣ PHP: youtube_sub.php[code]$apiKey = 'YOUR_YOUTUBE_API_KEY'; // 실제 Key로 변경
$videoId = $_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초 후 제출[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 형식 지원
watch?v=VIDEOID
youtu.be/VIDEOID
embed/VIDEOID
shorts/VIDEOID
7. 유튜브 URL만 감지
videoId 추출에 실패하면 스크립트 실행 중단 → 다른 URL이나 일반 텍스트에는 영향 없음
이제 wr_1에 유튜브 주소를 입력하면 자동으로 제목이 들어가고, 1초 뒤 폼이 제출됩니다.
1️⃣ PHP: youtube_sub.php[code]$apiKey = 'YOUR_YOUTUBE_API_KEY'; // 실제 Key로 변경
$videoId = $_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초 후 제출[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 형식 지원
watch?v=VIDEOID
youtu.be/VIDEOID
embed/VIDEOID
shorts/VIDEOID
7. 유튜브 URL만 감지
videoId 추출에 실패하면 스크립트 실행 중단 → 다른 URL이나 일반 텍스트에는 영향 없음
이제 wr_1에 유튜브 주소를 입력하면 자동으로 제목이 들어가고, 1초 뒤 폼이 제출됩니다.
댓글목록
등록된 댓글이 없습니다.
![]() ![]() |