How designers and developers turn live websites into portfolio videos: what to capture, how long, which shape for each platform, and how to make a set of projects look consistent.
Aviral LakhanpaulUpdated 3 min read
Capture each site as a short scroll video rather than a screenshot: 10 to 20 seconds, paused on the two or three sections that carry the work, in the shape of wherever it will be shown. Use the same frame, background and motion for every project so the portfolio reads as a set. A URL-to-video tool does this from the live link; a screen recorder works for sites that are no longer public.
A full-page screenshot is either shrunk until nothing can be read or cropped to the hero, which leaves out most of what you made. A scroll video shows the page at a readable size and still gets to the footer, and it shows the things a still cannot: the rhythm between sections, sticky elements, hover states and, with the right engine, scroll animations.
Somebody browsing a portfolio gives each project a few seconds before deciding whether to stay. Start moving straight away, or after a hold of a second or so on the hero, and keep the whole scroll between 10 and 20 seconds.
Pauses do more for a portfolio video than anything else. Stop for a second or two on each section that shows a decision: the hero, the feature grid, the pricing table. Up to 6 pauses fit in one video, each between 0.5 and 5 seconds. If the page is long, trim the scroll to end before the footer rather than speeding everything up.
| Where it goes | Shape | Format |
|---|---|---|
| Your own portfolio site | 16:9 or 4:3 for desktop, 4:5 or 9:16 for the phone version | MP4, or WebM for smaller files |
| Dribbble, Behance, Peerlist | 4:3 or 16:9 | MP4 |
| A case study page | 16:9, with the browser frame on | MP4 |
| LinkedIn or Instagram feed | 4:5 or 1:1 | MP4 |
| A pitch email to a client | 16:9 or 1:1, short | GIF, which plays inline in most mail apps |
Check each platform’s own upload limits before exporting at 4K: a 1080p file is usually the safer choice for anything that will be re-encoded on upload.
Twelve projects captured twelve different ways look like twelve different people’s work. Decide the presentation once and repeat it.
A silent looping video behaves like an animated image and autoplays in every modern browser, as long as it is muted and allowed to play inline. Use Down and Back as the playback so the last frame matches the first and the loop has no jump.
<video autoplay muted loop playsinline preload="metadata"
poster="project-poster.jpg" width="1920" height="1080">
<source src="project.webm" type="video/webm" />
<source src="project.mp4" type="video/mp4" />
</video>Width and height stop the layout jumping while the file loads, and the poster gives the slot something to show before the first frame arrives.
Paste a link and preview the scroll for free. 51 free credits when you sign up, no card, and no watermark on anything you export.
Both, for different jobs. A still makes a sharp thumbnail; a scroll video shows the whole page at a readable size, plus hover states and motion. Most designers lead with the video and keep a still as its poster.
A URL tool can only capture what is live today. If you kept a copy of the build, host it at a temporary public address and record that, or record it locally with a screen recorder.
Yes. Read the page at phone width rather than shrinking a desktop capture, so the site serves its real mobile layout, and export at 9:16 or 4:5.
Automate website recordings with customizable motion, smart controls, and export options designed for modern creators.
