Instagram Video Downloader

Paste an Instagram link to fetch available videos

Supports public posts, reels, carousels and IGTV. Private content cannot be accessed.

How it works

Paste a public Instagram link in the input above.
Click Fetch to preview available videos and qualities.
Choose a quality and press Download. Use Copy link to share.

If client-only mode cannot access the post due to CORS or login requirements, use the server-assisted option described in the code comments.

About

This tool attempts to extract direct video URLs from public Instagram pages. For reliable results use the server-assisted proxy option on a responsible stateless server.

FAQ & Legal

We only support public posts. Do not download or distribute copyrighted material without permission. Respect Instagram Terms of Service.

/* Styles for Instagram Video Downloader - Theme variables - Responsive breakpoints - Animations and accessible focus styles */ :root { --bg: #0f1724; --card-bg: rgba(255,255,255,0.06); --glass: rgba(255,255,255,0.04); --text: #e6eef8; --muted: #9fb0c8; --accent-start: #fff95b; --accent-end: #ff930f; --accent: linear-gradient(90deg,var(--accent-start),var(--accent-end)); --glass-border: rgba(255,255,255,0.04); --max-width: 1200px; --radius: 12px; --shadow: 0 6px 18px rgba(8,10,15,0.6); --card-shadow: 0 6px 24px rgba(6,8,12,0.6); --focus: 0 0 0 4px rgba(255,147,15,0.15); --ease: cubic-bezier(0.2,0.9,0.3,1); --glass-blur: 8px; } /* Light theme variant */ [data-theme="light"] { --bg: #f7f9fb; --card-bg: rgba(255,255,255,0.8); --glass: rgba(255,255,255,0.6); --text: #0b1220; --muted: #505e6b; --glass-border: rgba(11,18,32,0.06); --shadow: 0 8px 30px rgba(9,12,20,0.06); --card-shadow: 0 8px 40px rgba(9,12,20,0.08); --focus: 0 0 0 4px rgba(255,147,15,0.12); } /* Base reset */ * { box-sizing: border-box; } html,body { height: 100%; margin: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: linear-gradient(180deg,var(--bg), #071025 140%); color: var(--text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; line-height: 1.45; } .container { max-width: var(--max-width); margin: 0 auto; padding: 1.25rem; } /* Header */ .site-header { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(var(--glass-blur)); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-bottom: 1px solid var(--glass-border); transition: transform 320ms var(--ease), background 300ms var(--ease); } .header-inner { display: flex; align-items: center; gap: 1rem; justify-content: space-between; } .brand { display:flex; align-items:center; gap:0.75rem; text-decoration: none; color:var(--text); } .site-title { font-weight:700; font-size:1.05rem; letter-spacing: -0.02em; } .main-nav ul { list-style:none; display:flex; gap:0.75rem; margin:0; padding:0; } .nav-link { color:var(--muted); text-decoration:none; font-weight:600; padding:0.35rem 0.5rem; border-radius:8px; } .nav-link:hover, .nav-link:focus { color:var(--text); outline:none; } .header-actions { display:flex; gap:0.5rem; align-items:center; } .icon-btn { background:transparent; border:1px solid transparent; color:var(--text); padding:0.4rem; border-radius:8px; cursor:pointer; } /* Hero */ .hero { text-align:center; padding:2rem 0 1rem; } .hero h1 { margin:0; font-size:clamp(1.3rem,3.6vw,2.2rem); line-height:1.05; } .lead { color:var(--muted); margin-top:0.5rem; } /* Form */ .fetch-form { margin-top:1.25rem; display:flex; flex-direction:column; align-items:center; gap:0.5rem; } .input-group { display:flex; gap:0.5rem; width:100%; max-width:840px; } input[type="url"] { flex:1; padding:0.9rem 1rem; font-size:1rem; border-radius:12px; border:1px solid var(--glass-border); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); color:var(--text); outline:none; transition: box-shadow 220ms var(--ease), transform 220ms var(--ease); } input[type="url"]::placeholder { color: rgba(255,255,255,0.35); transition: transform 300ms var(--ease); } input[type="url"]:focus { box-shadow: var(--focus); transform: translateY(-1px); border-color: rgba(255,147,15,0.9); } .btn { border: none; padding:0.9rem 1.1rem; border-radius:12px; cursor:pointer; font-weight:700; display:inline-flex; align-items:center; gap:0.5rem; } .btn-primary { background: var(--accent-start); background-image: var(--accent); color:#0b1220; box-shadow: var(--shadow); transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); } .btn-primary:active { transform: translateY(1px) scale(0.995); } .hints { color:var(--muted); margin-top:0.25rem; } .status { margin-top:0.5rem; color:var(--muted); min-height:1.2rem; } /* Preview area */ .preview-area { margin-top:2rem; display:grid; gap:1rem; } .cards-grid { display:grid; gap:1rem; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); margin-top:2rem; } .card { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:var(--radius); padding:1rem; box-shadow: var(--card-shadow); border:1px solid var(--glass-border); } /* Media card */ .media-card { display:flex; gap:1rem; align-items:flex-start; padding:0.75rem; cursor:default; transform-origin: center; transition: transform 300ms var(--ease), opacity 300ms var(--ease); opacity:0; transform: translateY(10px); } .media-card.show { opacity:1; transform: translateY(0); } .thumb-wrap { min-width:220px; max-width:420px; border-radius:10px; overflow:hidden; flex:1 1 420px; background:rgba(0,0,0,0.04); display:flex; align-items:center; justify-content:center; transition: transform 240ms var(--ease); } .thumb-wrap:hover { transform: scale(1.02); } .thumb-wrap video, .thumb-wrap img { max-width:100%; width:100%; height:auto; display:block; } .media-meta { width:320px; max-width:40%; min-width:180px; display:flex; flex-direction:column; gap:0.75rem; } .meta-title { font-weight:700; font-size:1rem; } .meta-sub { color:var(--muted); font-size:0.9rem; } .controls { display:flex; gap:0.5rem; flex-wrap:wrap; } .pill { background:rgba(255,255,255,0.03); color:var(--muted); padding:0.35rem 0.6rem; border-radius:999px; font-weight:600; font-size:0.85rem; } /* Footer */ .site-footer { margin-top:3rem; padding:2rem 0 3rem; border-top:1px solid var(--glass-border); } .footer-grid { display:grid; grid-template-columns: 1fr 200px 200px; gap:1rem; align-items:start; } .footer-grid a { color:var(--muted); text-decoration:none; } .legal { margin-top:1rem; } .muted { color:var(--muted); } /* Toast */ .toast { position: fixed; right: 1rem; bottom: 1rem; min-width: 200px; background: linear-gradient(90deg,var(--accent-start),var(--accent-end)); color:#071125; padding:0.85rem 1rem; border-radius:12px; box-shadow: var(--shadow); transform: translateY(20px); opacity: 0; transition: opacity 300ms var(--ease), transform 300ms var(--ease); pointer-events:none; z-index:1000; } .toast.show { opacity:1; transform: translateY(0); pointer-events:auto; } /* Visually hidden (accessibility) */ .visually-hidden { position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; } /* Responsive */ @media (max-width: 900px) { .media-meta { width:100%; max-width:100%; } .thumb-wrap { min-width:140px; } .footer-grid { grid-template-columns: 1fr; } .main-nav { display:none; } } @media (min-width: 2000px) { :root { --max-width: 1800px; } .thumb-wrap { max-width:800px; } } /* Micro animations */ .fade-in { animation: fadeIn 900ms var(--ease) both; } @keyframes fadeIn { from { opacity:0; transform: translateY(6px);} to { opacity:1; transform:none;} } /* app.js - Instagram Video Downloader (vanilla JS module) - Validates Instagram URLs - Attempts client-only extraction of media URLs by fetching the Instagram page and parsing metadata - Gracefully handles CORS failures and shows server-assisted instructions - Supports preview, copy link, and download (when direct URL is reachable) - Includes comments with a small Node/Express proxy snippet for server-assisted mode - Does not persist user URLs or send them elsewhere by default */ // NOTE: If deploying a server proxy, ensure the server is stateless and does not log/store URLs or media. // Sample Node/Express snippet (commented): /* // const express = require('express'); // const fetch = require('node-fetch'); // const app = express(); // app.get('/api/fetch', async (req, res) => { // const target = req.query.url; // if (!target) return res.status(400).json({ error: 'Missing url' }); // // Basic allowlist (recommended): only allow instagram.com domains // if (!/^https?:\/\/(www\.)?instagram\.com/i.test(target)) { // return res.status(400).json({ error: 'Invalid host' }); // } // try { // const r = await fetch(target, { headers: { 'User-Agent': 'Mozilla/5.0' } }); // const html = await r.text(); // // Parse server-side for og:video or JSON embedded and return a JSON response // return res.json({ html }); // } catch (err) { // return res.status(502).json({ error: 'Fetch failed' }); // } // }); // app.listen(3000); */ // Security considerations: // - Do not cache or store scraped HTML or media without user consent. // - Rate-limit and protect your proxy to avoid abuse. // - Consider requiring an API key for server usage. // DOM refs const form = document.getElementById('fetch-form'); const urlInput = document.getElementById('url-input'); const statusEl = document.getElementById('status'); const previewArea = document.getElementById('preview-area'); const toastEl = document.getElementById('toast'); const themeToggle = document.getElementById('theme-toggle'); // Minimal utilities function showStatus(message, hint = '') { statusEl.textContent = message + (hint ? ' - ' + hint : ''); } function showToast(message, ms = 3000) { toastEl.textContent = message; toastEl.classList.add('show'); setTimeout(() => toastEl.classList.remove('show'), ms); } function isInstagramUrl(url) { try { const u = new URL(url); return /(^|\.)instagram\.com$/.test(u.hostname) || /instagr\.am$/.test(u.hostname); } catch { return false; } } // Robust URL normaliser function normalizeInstagramUrl(input) { if (!input) return null; let v = input.trim(); // If user pasted plain shortcode like p/abc, preprend https://www.instagram.com/ if (/^[prtvx0-9A-Za-z_-]{6,}$/.test(v)) { v = 'https://www.instagram.com/p/' + v + '/'; } // Ensure protocol if (!/^https?:\/\//i.test(v)) v = 'https://' + v; // Accept common short domain try { const u = new URL(v); // Remove query fragments for canonical fetch u.hash = ''; u.search = ''; // Force www.instagram.com for consistency if domain is instagr.am shortlink if (/instagr\.am$/i.test(u.hostname)) { // keep as is; shortlink will redirect } return u.toString(); } catch { return null; } } // Parse HTML string and attempt to extract video URLs and metadata async function extractFromHtml(html, baseUrl) { // Parse with DOMParser in the browser const parser = new DOMParser(); const doc = parser.parseFromString(html, 'text/html'); const meta = {}; // Get og: tags const ogProps = ['og:video','og:video:secure_url','og:video:type','og:image','og:description','og:title']; ogProps.forEach(p => { const el = doc.querySelector('meta[property="' + p + '"]') || doc.querySelector('meta[name="' + p + '"]'); if (el && el.content) meta[p] = el.content; }); // Check link rel=canonical const canonicalEl = doc.querySelector('link[rel="canonical"]'); if (canonicalEl) meta.canonical = canonicalEl.href; // Try JSON-LD const ld = doc.querySelector('script[type="application/ld+json"]'); if (ld) { try { const json = JSON.parse(ld.textContent); meta.ldjson = json; } catch (e) { // ignore parse errors } } // Instagram embeds initial state in scripts - attempt to find window._sharedData or other JSON blobs const scripts = Array.from(doc.scripts).map(s => s.textContent).filter(Boolean); let sharedJson = null; for (const s of scripts) { // Attempt to find JSON that includes "graphql" key const match = s.match(/window\._sharedData\s*=\s*(\{.+\});?/); if (match) { try { sharedJson = JSON.parse(match[1]); break; } catch (e) { /* continue */ } } // Newer Instagram may include "window.__additionalDataLoaded" or "edge_media_to_caption" const match2 = s.match(/(window\.__additionalDataLoaded|window\.__INITIAL_STATE__)$['"]?[^'"]+['"]?,\s*(\{.+\})$;?/); if (match2) { try { sharedJson = JSON.parse(match2[2]); break; } catch (e) { /* continue */ } } } if (sharedJson) meta.shared = sharedJson; // Attempt to build list of media items const items = []; // 1) Prefer og:video secure url if present if (meta['og:video:secure_url'] || meta['og:video']) { const url = meta['og:video:secure_url'] || meta['og:video']; items.push({ type: 'video', url, title: meta['og:title'] || '', description: meta['og:description'] || '', source: 'og' }); } // 2) JSON-LD video if (meta.ldjson && meta.ldjson.video) { const v = meta.ldjson.video; items.push({ type: 'video', url: v.contentUrl || v.embedUrl || v.url, title: meta.ldjson.name || '', description: meta.ldjson.description || '', source: 'ldjson' }); } // 3) Shared JSON parsing (graph) if (meta.shared) { try { // navigate to entry_data or graphql structures // Patterns vary by Instagram versions const g = meta.shared; let mediaObj = null; // Try common shapes if (g.entry_data && g.entry_data.PostPage && g.entry_data.PostPage[0]) { mediaObj = g.entry_data.PostPage[0].graphql.shortcode_media; } else if (g.shortcode_media) { mediaObj = g.shortcode_media; } else if (g.graphql && g.graphql.shortcode_media) { mediaObj = g.graphql.shortcode_media; } else if (g.data && g.data.shortcode_media) { mediaObj = g.data.shortcode_media; } if (mediaObj) { // Single video if (mediaObj.is_video) { // There could be multiple display resources; prefer video_url or video_versions const url = mediaObj.video_url || (mediaObj.video_versions && mediaObj.video_versions[0] && mediaObj.video_versions[0].url); if (url) items.push({ type: 'video', url, title: mediaObj.title || '', description: mediaObj.edge_media_to_caption && mediaObj.edge_media_to_caption.edges && mediaObj.edge_media_to_caption.edges[0] && mediaObj.edge_media_to_caption.edges[0].node.text || '', source: 'graphql' }); } // Carousel if (mediaObj.edge_sidecar_to_children && mediaObj.edge_sidecar_to_children.edges) { for (const e of mediaObj.edge_sidecar_to_children.edges) { const n = e.node; if (n.is_video) { const url = n.video_url || (n.video_versions && n.video_versions[0] && n.video_versions[0].url); if (url) items.push({ type: 'video', url, title: '', description: '', source: 'carousel' }); } else { // image fallback const img = n.display_url || n.display_src; if (img) items.push({ type: 'image', url: img, source: 'carousel' }); } } } } } catch (e) { // ignore parsing errors } } // Remove duplicates, normalize const seen = new Set(); const uniqueItems = items.filter(i => { if (!i.url) return false; const key = i.url.split('?')[0]; if (seen.has(key)) return false; seen.add(key); return true; }); return uniqueItems; } // Utility: attempt to fetch HEAD to estimate size (may fail due to CORS) async function estimateSize(url) { try { const head = await fetch(url, { method: 'HEAD' }); if (head.ok) { const len = head.headers.get('content-length'); if (len) { const kb = Number(len) / 1024; return (kb > 1024) ? (kb/1024).toFixed(2) + ' MB' : Math.round(kb) + ' KB'; } } } catch (e) { // HEAD failed (likely CORS), ignore } return 'Unknown size'; } // Attempt client-only extraction by fetching the Instagram page async function fetchAndExtract(url) { showStatus('Fetching preview...'); try { const res = await fetch(url, { method: 'GET', mode: 'cors' }); // If browser blocks due to CORS, this will throw or res.ok will be false if (!res.ok) { throw new Error('Fetch failed with status ' + res.status); } const html = await res.text(); const items = await extractFromHtml(html, url); if (items.length === 0) { showStatus('No media found in the page metadata. Try server-assisted mode.'); } else { showStatus('Preview ready', `${items.length} item(s) found`); } return { items, source: 'client' }; } catch (err) { // CORS or network error console.warn('Client fetch failed:', err.message); showStatus('Client-only fetch blocked by CORS or network.', 'See server-assisted option below'); return { items: [], error: err, source: 'client' }; } } // Build media card elements async function renderItems(items) { previewArea.innerHTML = ''; if (!items || items.length === 0) { const info = document.createElement('div'); info.className = 'card'; info.innerHTML = '

No preview available. If the post is public but blocked by CORS, consider a server-assisted proxy. See the code comments for a sample.

'; previewArea.appendChild(info); return; } const fragment = document.createDocumentFragment(); for (const [idx, item] of items.entries()) { const card = document.createElement('div'); card.className = 'card media-card'; // Accessibility: label card.setAttribute('role', 'group'); card.setAttribute('aria-label', item.type + ' preview'); // Thumbnail/video area const thumbWrap = document.createElement('div'); thumbWrap.className = 'thumb-wrap'; if (item.type === 'video') { // Create a lazy-loaded video element const video = document.createElement('video'); video.controls = true; video.preload = 'metadata'; // Use crossorigin anonymous to attempt to play if allowed video.crossOrigin = 'anonymous'; // Lazy-load src only when card inserted into view (basic) video.src = item.url; video.alt = item.title || 'Instagram video preview'; video.addEventListener('error', () => { // If video fails to load, show fallback message thumbWrap.innerHTML = '

Preview blocked due to CORS or resource restrictions.

'; }); thumbWrap.appendChild(video); } else { const img = document.createElement('img'); img.alt = item.title || 'Instagram image'; img.src = item.url; img.loading = 'lazy'; img.addEventListener('error', () => { thumbWrap.innerHTML = '

Image preview blocked or failed to load.

'; }); thumbWrap.appendChild(img); } // Meta and controls const meta = document.createElement('div'); meta.className = 'media-meta'; const title = document.createElement('div'); title.className = 'meta-title'; title.textContent = item.title || 'Instagram media'; const sub = document.createElement('div'); sub.className = 'meta-sub'; sub.textContent = item.description || 'Preview and download the available quality if accessible'; const controls = document.createElement('div'); controls.className = 'controls'; // Size label (attempt) const sizeLabel = document.createElement('div'); sizeLabel.className = 'pill'; sizeLabel.textContent = 'Size: estimating...'; controls.appendChild(sizeLabel); // Copy link button const copyBtn = document.createElement('button'); copyBtn.className = 'btn'; copyBtn.textContent = 'Copy link'; copyBtn.addEventListener('click', async () => { try { await navigator.clipboard.writeText(item.url); showToast('Direct link copied'); } catch (e) { showToast('Copy failed'); } }); controls.appendChild(copyBtn); // Download button const dlBtn = document.createElement('button'); dlBtn.className = 'btn btn-primary'; dlBtn.textContent = 'Download'; dlBtn.addEventListener('click', () => { startDownload(item.url, item.type === 'video' ? 'video.mp4' : 'image.jpg'); }); controls.appendChild(dlBtn); // Download All (if multiple items, visible at top-level, but include for each as optional) if (items.length > 1) { const dlAll = document.createElement('button'); dlAll.className = 'btn'; dlAll.textContent = 'Download All'; dlAll.addEventListener('click', () => { // Option A: sequential downloads downloadAllSequential(items); // Option B: zip via JSZip (optional). To enable zipping, include JSZip CDN and implement zip logic. }); controls.appendChild(dlAll); } meta.appendChild(title); meta.appendChild(sub); meta.appendChild(controls); card.appendChild(thumbWrap); card.appendChild(meta); fragment.appendChild(card); // Show animation requestAnimationFrame(() => card.classList.add('show')); // Try to estimate size estimateSize(item.url).then(size => { sizeLabel.textContent = 'Size: ' + size; }); } previewArea.appendChild(fragment); } // Create a downloadable link and trigger click; some cross-origin resources may not allow download due to CORS function startDownload(url, fallbackName = 'media') { // Inform user showToast('Starting download...'); // Create a temporary anchor const a = document.createElement('a'); a.href = url; // Use filename from URL if possible try { const pathname = new URL(url).pathname; const name = pathname.split('/').pop() || fallbackName; a.download = name; } catch { a.download = fallbackName; } // Some browsers will block cross-origin downloads if resource disallows access. document.body.appendChild(a); a.click(); a.remove(); } // Sequential download helper for multiple items async function downloadAllSequential(items) { for (const it of items) { startDownload(it.url, (it.type === 'video') ? 'video.mp4' : 'image.jpg'); // Small delay to avoid overwhelming the browser await new Promise(r => setTimeout(r, 600)); } showToast('Requested all downloads'); } // Validate input and orchestrate fetch form.addEventListener('submit', async (e) => { e.preventDefault(); const raw = urlInput.value; const normalized = normalizeInstagramUrl(raw); if (!normalized || !isInstagramUrl(normalized)) { showStatus('Please enter a valid Instagram post or reel URL.'); return; } showStatus('Preparing to fetch...'); previewArea.innerHTML = ''; // clear const result = await fetchAndExtract(normalized); if (result && result.items && result.items.length > 0) { await renderItems(result.items); } else { // No items from client-only attempt; show server-assisted instruction card showServerAssistedCard(normalized); } }); // Drag & drop URL support document.addEventListener('dragover', (e) => { e.preventDefault(); }); document.addEventListener('drop', (e) => { e.preventDefault(); if (e.dataTransfer && e.dataTransfer.items && e.dataTransfer.items.length) { const text = e.dataTransfer.getData('text'); if (text) { urlInput.value = text.trim(); showToast('Link dropped'); } } }); // Server-assisted instruction card (shown when client-only fails) function showServerAssistedCard(url) { previewArea.innerHTML = ''; const card = document.createElement('div'); card.className = 'card'; card.innerHTML = `

Server-assisted mode recommended

Client-only extraction was blocked by CORS or resource restrictions. To reliably fetch media from Instagram, run a small server endpoint that fetches the Instagram HTML and returns media URLs to this client. Sample server snippet is included in the code comments of this file.

Quick steps:

Deploy a stateless proxy that fetches the Instagram URL server-side.
Return parsed media URLs as JSON to the client.
The client then uses those URLs to preview and download.

Do not use the proxy to bypass login for private content. Respect privacy and copyright.

`; previewArea.appendChild(card); document.getElementById('try-proxy').addEventListener('click', () => { // Demonstration only: this will not work unless you have implemented the /api/fetch endpoint attemptServerFetch(url); }); } // Example function to call your server-assisted endpoint (must be implemented separately) async function attemptServerFetch(instaUrl) { showStatus('Trying server-assisted fetch...'); // Replace /api/fetch with your deployed server endpoint const proxyEndpoint = '/api/fetch?url=' + encodeURIComponent(instaUrl); try { const r = await fetch(proxyEndpoint); if (!r.ok) throw new Error('Proxy fetch failed'); const json = await r.json(); // Expect the server to return { items: [ {type, url, title, description} ] } if (json && json.items && json.items.length) { showStatus('Server-assisted preview ready', `${json.items.length} item(s)`); await renderItems(json.items); } else { showStatus('Server returned no items', 'Check server parsing logic'); } } catch (err) { console.error('Server-assisted fetch error', err); showStatus('Server-assisted fetch failed. Ensure the proxy endpoint is running and allowed.'); } } // Theme toggle themeToggle.addEventListener('click', () => { const root = document.documentElement; const isLight = root.getAttribute('data-theme') === 'light'; root.setAttribute('data-theme', isLight ? 'dark' : 'light'); themeToggle.setAttribute('aria-pressed', String(!isLight)); }); // Minimal initial UI polish urlInput.addEventListener('focus', () => { urlInput.placeholder = 'Paste https://www.instagram.com/...'; }); urlInput.addEventListener('blur', () => { urlInput.placeholder = 'https://www.instagram.com/p/XXXXXXXXX/ or https://instagr.am/reel/XXXXXXXX/'; }); // Avoid console logging user-submitted URLs in production // console.log statements kept minimal and only for non-sensitive events // Accessibility: announce ready document.addEventListener('DOMContentLoaded', () => { showStatus('Ready. Paste an Instagram link to fetch a preview.'); });