Paste a YouTube link below and add a timestamp either as hh:mm:ss, mm:ss, or just seconds:
Reuse
Designed to work fully offline. The source code for this tool is licensed under the MIT License
(View License)
November 1, 2026
Paste a YouTube link below and add a timestamp either as hh:mm:ss, mm:ss, or just seconds:
Last updated: 2026-11-01
---
title: "Timestamp a YouTube link"
date: "2026-11-01"
categories: [text]
description: "Add a timestamp to a cleaned up YouTube link"
image: "timestampyt.assets/timestampyt.webp"
last_updated: "2026-11-01"
---
<style>
:root {
--dark: #303030;
--light: #DADADA;
--less-light: #BBBBBB;
--even-less-light: #9e9e9e;
--blue: #2F58E9;
--more-blue: #2135b9;
--even-more-blue: #173485;
--base-padding: 7px 12px 7px 12px;
}
.input-field {
border-radius: 5px;
padding: var(--base-padding);
margin-bottom: 10px;
border: 1px solid var(--light);
}
#link-input {
width: calc(100% - 150px);
margin-right: 10px;
}
.row-container {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.timestamp-container {
display: flex;
align-items: center;
}
#timestamp-input {
width: 100px;
}
.button-yt {
border: none;
border-radius: 5px;
padding: var(--base-padding);
font-size: 12pt;
cursor: pointer;
margin: 10px 6px 10px 0px;
}
.button-yt-misc {
border: none;
border-radius: 5px;
padding: var(--base-padding);
font-size: 12pt;
cursor: pointer;
margin: 10px 6px 10px 0px;
color: var(--dark);
background-color: var(--light);
}
.button-yt-misc:hover {
background-color: var(--less-light);
}
.button-yt-misc:active {
background-color: var(--even-less-light);
}
#button-yt-main {
color: var(--light);
background-color: var(--blue);
}
#button-yt-main:hover {
background-color: var(--more-blue);
}
#button-yt-main:active {
background-color: var(--even-more-blue);
}
</style>
Paste a YouTube link below and add a timestamp either as `hh:mm:ss`, `mm:ss`, or just seconds:
<div class="row-container">
<input type="text" id="link-input" class="input-field" placeholder="https://www.youtube.com/watch?v=kL1PDqzqhM4">
<div class="timestamp-container">
<input type="text" id="timestamp-input" class="input-field" placeholder="1:23">
</div>
</div>
<div class="row-container">
<button type="button" class="button-yt" id="button-yt-main">Copy timestamped link</button>
<button type="button" class="button-yt-misc" id="button-yt-clear">Clear</button>
<div id="status-icon"></div>
</div>
<script>
(function () {
"use strict";
const inputField = document.getElementById("link-input");
const timestampInput = document.getElementById("timestamp-input");
const btnGenerate = document.getElementById("button-yt-main");
const btnClear = document.getElementById("button-yt-clear");
function clearInputs() {
inputField.value = "";
timestampInput.value = "";
inputField.focus();
}
function parseTimestamp(timeStr) {
if (!timeStr) return 0;
// If input is just numbers, treat it as seconds
if (/^\d+$/.test(timeStr)) {
return parseInt(timeStr, 10);
}
const times = timeStr.split(":").map((part) => parseInt(part, 10) || 0);
let seconds = 0;
// hh:mm:ss
if (times.length === 3) {
seconds = times[0] * 3600 + times[1] * 60 + times[2];
// mm:ss
} else if (times.length === 2) {
seconds = times[0] * 60 + times[1];
// seconds only
} else if (times.length === 1) {
seconds = times[0];
}
return seconds;
}
function generateAndCopyLink() {
if (!inputField || !inputField.value.trim()) {
const statusIcon = document.getElementById("status-icon");
statusIcon.className = "bi bi-question-circle";
statusIcon.title = "Enter a valid YouTube link";
return;
}
const url = new URL(inputField.value.trim());
let videoId = "";
if (url.hostname.includes("youtube.com")) {
videoId = url.searchParams.get("v");
} else if (url.hostname.includes("youtu.be")) {
videoId = url.pathname.substring(1);
} else {
const statusIcon = document.getElementById("status-icon");
statusIcon.className = "bi bi-question-circle";
statusIcon.title = "Invalid link";
return;
}
if (!videoId) {
const statusIcon = document.getElementById("status-icon");
statusIcon.className = "bi bi-question-circle";
statusIcon.title = "Unable to get video ID";
return;
}
const timestamp = parseTimestamp(timestampInput.value);
const timestampedUrl = `https://youtu.be/${videoId}?t=${timestamp}`;
navigator.clipboard
.writeText(timestampedUrl)
.then(() => {
const statusIcon = document.getElementById("status-icon");
statusIcon.className = "bi bi-check-lg";
})
.catch((err) => {
console.error("Failed to copy: ", err);
const statusIcon = document.getElementById("status-icon");
statusIcon.className = "bi bi-question-circle";
statusIcon.title = "Failed to copy to clipboard";
});
}
if (btnGenerate) btnGenerate.addEventListener("click", generateAndCopyLink);
if (btnClear) btnClear.addEventListener("click", clearInputs);
})();
</script>
<p class="meta-last-updated">Last updated: {{< meta last_updated >}}</p>