<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<title>youtube id 추출하기</title>
</head>
<body>
<div><h1>youtube id 추출하기</h1></div>
<div class="mt-5">
<input type="text" class="w-50 m-2" name="youtubeUrlInput" id="youtubeUrlInput" value="" placeholder="유튜브 주소를 입력하세요.">
<input type="hidden" name="content" value="">
<a href="#apply" class="btn btn-sm btn-success">적용</a>
<a href="#clear" class="btn btn-sm btn-primary" >해제</a>
</div>
<div id="videoWrap" class="m-5"></div>
<br/><span style="color: red; ">적용 버튼 클릭후 미리 동영상 플레이를 해보시고 꼭 외부에서 플레이가 가능한 상태인지 확인하세요.</span>
</body>
</html>우선 유튜브 주소를 입력받을 타입이 text 인 input을 하나 만들고 적용버튼과 해제버튼도 만들어 주었다.
<script>
const apply = $("a[href='#apply']");
const clear = $("a[href='#clear']");
const videoWrap = $("#videoWrap");
const youtubeUrlInput = $("input[name='youtubeUrlInput']");
clear.hide();
apply.click(function(e) {
e.preventDefault();
let youtubeUrl = youtubeUrlInput.val();
console.log("youtubeUrl :" + youtubeUrl);
if(youtubeUrl === "") {
alert("유튜브 주소를 입력해 주세요.");
return false;
}
const code = youtube_id_extraction(youtubeUrl);
console.log("code : " + code);
let youtubeIframe = "<iframe width='560' height='300' src='https://www.youtube.com/embed/" + code + "' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>";
console.log("youtubeIframe :" + youtubeIframe);
$("input[name='content']").val(youtubeIframe);
$(this).hide(function() {
clear.show(function() {
youtubeUrlInput.prop("readonly", true);
videoWrap.empty().html(youtubeIframe);
});
});
});
clear.click(function(e) {
e.preventDefault();
$(this).hide(function() {
apply.show(function() {
youtubeUrlInput.prop("readonly", false);
videoWrap.empty();
$("input[name='content']").val("");
});
});
});
//유튜브 ID 추출
function youtube_id_extraction(url){
const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
const match = url.match(regExp);
return (match&&match[7].length==11)? match[7] : false;
}
</script>적용버튼을 누르면 유튜브 주소를 가져와 정규식으로 고유 id값을 추출한다.
추출한 id값은 iframe 요소로 만든후 저장할 input 값에 넣어준다.
그리고 사용자가 유튜브 주소값을 수정하지 못하도록 input 창은 readonly 속성을 true 상태로 바꿔준다.
마지막으로 적용 버튼은 가려주고 해제버튼은 나타나게 한다.
해제 버튼을 누르면 input 창의 readonly 속성을 false 상태로 바꾼 후 미리 보기 했던 div는 empty()를 이용해 비워준다.
유튜브 썸네일 추출 및 다운로드 방법
유튜브란?유튜브는 2005년 서비스를 시작한 이후 2006년부터 구글이 유튜브를 인수하여 운영하고 있는 동영상 공유 플랫폼이다. 어도비 플래시 플레이어와 H.264 영상코덱, HTML5 플레이어, WebM 코덱
letsplaycoding.tistory.com