Ever wanted to grab a video from a social media platform, but didn't want to use shady browser extensions? Inspecting the <video src> only showed some weird blob or couldn't even find where the video element is?
Here's a small script you can paste into your browser console and it will intercept and log videos that get streamed. Of course, it won't work for all platforms (e.g. DRM-protected content, some platforms use different streams), but may give you an idea on how to start on your own solution. The example is currently valid for Instagram. With one tiny issue, Instagram separates video and audio streams so if you need both you will need to merge them using any of the various video editing tools out there.
A note before continuing: I do not encourage downloading content you do not own, this is for research purposes only.
How it works:
It overrides fetch() and XMLHttpRequest.open() to intercept outgoing network requests. When it spots an .mp4 URL, it strips the byte-range params and logs the clean URL. The getVideoUrls() helper lets you retrieve everything collected, useful if your console got noisy.
// Instagram Story Video URL Extractor
(() => {
const videoUrls = new Set();
// Strip start and end time params
const cleanUrl = (url) => {
const u = new URL(url);
u.searchParams.delete('bytestart');
u.searchParams.delete('byteend');
return u.toString();
};
// Intercept fetch
const origFetch = window.fetch;
window.fetch = async function(url, ...args) {
const urlStr = url?.toString?.() || url;
// Domain and extension matcher, you can drop the domain to use this elsewhere
if (urlStr.includes('fbcdn.net') && urlStr.includes('.mp4')) {
const clean = cleanUrl(urlStr);
if (!videoUrls.has(clean)) {
videoUrls.add(clean);
console.log('> Video found:', clean);
}
}
return origFetch.apply(this, [url, ...args]);
};
// Intercept XHR
const origOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(method, url) {
// Domain and extension matcher, you can drop the domain to use this elsewhere
if (url?.includes?.('fbcdn.net') && url?.includes?.('.mp4')) {
const clean = cleanUrl(url);
if (!videoUrls.has(clean)) {
videoUrls.add(clean);
console.log('> Video found:', clean);
}
}
return origOpen.apply(this, arguments);
};
// Helper to get all collected URLs
window.getVideoUrls = () => {
const urls = [...videoUrls];
console.log(`\nFound ${urls.length} video(s):\n`);
urls.forEach((url, i) => console.log(`${i + 1}. ${url}\n`));
return urls;
};
console.log('Extractor active - play stories/reels, then run getVideoUrls()');
})();
How to use (for total beginners)
- Open DevTools (F12)
- Paste script in the console, hit enter
- Play videos, see video URLs showing up
- Optionally run
getVideoUrls()at the end to get list of all vids played - Open URL in new tab to play, or right-click → Save As to download
SOCIAL SHARE CARD GENERATOR