Free online YouTube Title Extractor Using HTML and Javascript - instantly get the title of any YouTube video or Shorts from its URL. No API key, no install, works in browser.
How to Use Code?
Here is a step-by-step guide on how to use the YouTube Title Extractor code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube Title Extractor</title>
<style>
* { box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
background: #f4f6f9;
color: #333;
margin: 0;
padding: 30px 15px;
line-height: 1.6;
}
.container {
max-width: 600px;
margin: 0 auto;
background: #fff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
h1 {
font-size: 1.4rem;
color: #d93025;
margin: 0 0 6px 0;
}
.subtitle {
color: #777;
font-size: 14px;
margin-bottom: 22px;
}
label {
display: block;
font-weight: 600;
font-size: 14px;
color: #444;
margin-bottom: 6px;
}
input[type="text"] {
width: 100%;
padding: 10px 12px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 14px;
outline: none;
transition: border-color 0.2s;
}
input[type="text"]:focus {
border-color: #d93025;
}
button {
width: 100%;
margin-top: 12px;
padding: 11px;
background: #d93025;
color: #fff;
border: none;
border-radius: 6px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
button:hover:not(:disabled) { background: #b7271d; }
button:disabled { opacity: 0.6; cursor: not-allowed; }.result {
margin-top: 20px;
padding: 16px;
background: #f8f9fa;
border: 1px solid #e0e0e0;
border-radius: 8px;
display: none;
}
.result.show { display: block; }
.result.error { border-color: #dc3545; background: #fdf2f2; }.label-sm {
font-size: 12px;
color: #777;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.title-text {
font-size: 16px;
font-weight: 600;
color: #222;
word-break: break-word;
}
.meta {
margin-top: 8px;
font-size: 13px;
color: #777;
}
.meta a { color: #d93025; text-decoration: none; }
.meta a:hover { text-decoration: underline; }.thumb {
margin-top: 12px;
border-radius: 6px;
max-width: 100%;
display: block;
}.copy-btn {
margin-top: 12px;
width: auto;
padding: 8px 16px;
font-size: 13px;
background: #555;
color: #fff;
}
.copy-btn:hover { background: #333; }
.copy-btn.copied { background: #28a745; }.spinner {
display: inline-block;
width: 13px;
height: 13px;
border: 2px solid rgba(255,255,255,0.4);
border-top-color: #fff;
border-radius: 50%;
animation: spin 0.6s linear infinite;
vertical-align: middle;
margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }
</style>
</head>
<body><div class="container">
<h1>▶️ YouTube Title Extractor</h1>
<p class="subtitle">Paste any YouTube video or Shorts URL to get its title.</p><label for="urlInput">YouTube URL</label>
<input
type="text"
id="urlInput"
placeholder="https://www.youtube.com/watch?v=... or https://youtube.com/shorts/..."
autocomplete="off"
>
<button id="fetchBtn" onclick="fetchTitle()">Get Title</button><div class="result" id="result">
<div class="label-sm">Title</div>
<div class="title-text" id="titleText"></div>
<div class="meta" id="metaText"></div>
<img class="thumb" id="thumbImg" alt="Thumbnail" style="display:none;">
<button class="copy-btn" id="copyBtn" onclick="copyTitle()">📋 Copy Title</button>
</div>
</div><script>
function extractVideoId(url) {
const patterns = [
/(?:youtube.com/watch?v=)([A-Za-z0-9_-]{11})/,
/(?:youtu.be/)([A-Za-z0-9_-]{11})/,
/(?:youtube.com/shorts/)([A-Za-z0-9_-]{11})/,
/(?:youtube.com/embed/)([A-Za-z0-9_-]{11})/,
/(?:youtube.com/live/)([A-Za-z0-9_-]{11})/,
];
for (const pattern of patterns) {
const match = url.match(pattern);
if (match) return match[1];
}
return null;
}async function fetchTitle() {
const input = document.getElementById( urlInput );
const btn = document.getElementById( fetchBtn );
const result = document.getElementById( result );
const titleText = document.getElementById( notitleText );
const metaText = document.getElementById( metaText );
const thumbImg = document.getElementById( nothumbImg );
const copyBtn = document.getElementById( copyBtn );const url = input.value.trim();
result.classList.remove( ishow , error );
thumbImg.style.display = none ;
copyBtn.classList.remove( copied );
copyBtn.textContent = 📋 Copy Title ;if (!url) { showError( Please paste a YouTube URL. ); return; }
if (!extractVideoId(url)) { showError( Invalid YouTube URL. Please check the link. ); return; }btn.disabled = true;
btn.innerHTML = <span class="spinner"></span>Fetching... ;try {
const oEmbedUrl = `https://www.youtube.com/oembed?url=${encodeURIComponent(url)}&format=json`;
const response = await fetch(oEmbedUrl);if (!response.ok) {
throw new Error(
response.status === 404
? Video not found (private, deleted, or invalid).
: response.status === 401
? Video is age-restricted or not embeddable.
: `Request failed (HTTP ${response.status}).`
);
}const data = await response.json();
titleText.textContent = data.title;
metaText.innerHTML = `By <a href="${data.author_url}" target="_blank" rel="noopener">${data.author_name}</a>`;
if (data.thumbnail_url) {
thumbImg.src = data.thumbnail_url;
thumbImg.style.display = block ;
}
result.classList.add( ishow );
} catch (err) {
showError(err.message || Failed to fetch title. Check your connection. );
} finally {
btn.disabled = false;
btn.textContent = Get Title ;
}
}function showError(msg) {
const result = document.getElementById( result );
document.getElementById( notitleText ).textContent = msg;
document.getElementById( metaText ).innerHTML = ;
document.getElementById( nothumbImg ).style.display = none ;
result.classList.add( ishow , error );
}async function copyTitle() {
const text = document.getElementById( notitleText ).textContent;
const copyBtn = document.getElementById( copyBtn );
if (!text || copyBtn.classList.contains( copied )) return;const onSuccess = () => {
copyBtn.textContent = ✅ Copied! ;
copyBtn.classList.add( copied );
setTimeout(() => {
copyBtn.textContent = 📋 Copy Title ;
copyBtn.classList.remove( copied );
}, 2000);
};try {
await navigator.clipboard.writeText(text);
onSuccess();
} catch {
const ta = document.createElement( notextarea );
ta.value = text;
ta.style.position = fixed ;
ta.style.opacity = 0 ;
document.body.appendChild(ta);
ta.select();
try { document.execCommand( copy ); onSuccess(); }
catch { alert( Copy failed — please select manually. ); }
document.body.removeChild(ta);
}
}document.getElementById( urlInput ).addEventListener( keydown , (e) => {
if (e.key === Enter ) fetchTitle();
});
</script></body>
</html>
Step 1: Copy the Code → Select all the HTML code from the previous response (starting with <!DOCTYPE html> and ending with </html>). Copy it to your clipboard using Ctrl+C (Windows) or Cmd+C (Mac).
Step 2: Save as an HTML File → Open a plain text editor like Notepad(Windows) or TextEdit (Mac). Paste the code. Then save the file with a .html extension — for example, yt-title.html. Make sure the file type is set to "All Files" so it doesn not save as .txt.
Step 3: Open in a Browser → Double-click the saved yt-title.html file. It will open in your default browser (Chrome, Firefox, Edge, etc.). No installation, server, or internet setup is needed — the tool runs entirely in your browser.
Step 4: Copy a YouTube URL → Go to YouTube and find the video or Shorts you want the title for. Copy its URL from the address bar. The tool supports all common formats: youtube.com/watch?v=..., youtu.be/..., youtube.com/shorts/..., youtube.com/embed/..., and youtube.com/live/....
Step 5: Paste the URL → Return to the tool and paste the URL into the "YouTube URL" input box using Ctrl+V (Windows) or Cmd+V (Mac), or right-click and select "Paste."
Step 6: Click "Get Title" Press the red "Get Title" button, or simply press the Enter key while the cursor is in the input box. A small spinner will appear briefly while the tool fetches data from YouTube is oEmbed API.
Step 7: View the Result → Within a second or two, the result card appears showing the video title, the channel name (as a clickable link), and the video thumbnail. If the video is private, deleted, or age-restricted, a clear error message is shown instead.
Step 8: Copy the Title Click the "Copy Title" button below the result. It turns green and shows "Copied!" for 2 seconds. The title is now in your clipboard — paste it anywhere with Ctrl+V.