Add a Device Frame to a Video You Already Recorded

The clip already exists. Someone screen-recorded it on their phone, you exported it from a prototyping tool, a teammate sent you an MP4 — and now it needs to look like a product shot instead of a raw capture. A device frame does most of that work.

The awkward part is that most tools which put video inside a device assume you are starting from scratch. Below are four routes that all start from a file you already have, with honest notes on what each costs you.

Quick comparison

All four accept a finished video file. None of them can add cursor-driven effects afterwards — more on why in the troubleshooting section.

Before you start: match the aspect ratio

This is the step people skip, and it is the reason most homemade device mockups look wrong.

A device screen has a fixed aspect ratio. An iPhone 15 Pro screen is roughly 19.5:9. A MacBook Pro screen is 16:10. Your clip is probably 16:9, or whatever your display happens to be.

Put a 16:9 clip into a 19.5:9 phone screen and one of two things happens: it gets cropped, losing the sides, or it gets letterboxed, leaving black bars inside the phone — which looks like a mistake rather than a design choice.

Fix it before framing, not after:

• If you can re-record, capture a region matching the target ratio.
• If you cannot, crop deliberately to the part that matters rather than letting the tool decide. A cropped clip that shows the important half beats a squeezed clip that shows everything badly.
• For portrait content on a phone frame, the source should already be portrait. Rotating a landscape clip does not make it portrait content.

Method 1: ffmpeg and a transparent PNG frame

Free, scriptable, and completely under your control. Also the most work.

The idea: take a PNG of a device with a transparent screen area, scale your video to fill that area, and composite the two.

Step 1 — get a device PNG with a transparent screen. Apple publishes device images in its design resources, and there are open frame sets available. You need the screen area to be actually transparent, not white.

Step 2 — find the screen rectangle. Open the PNG in Preview, select the screen area, and note the x, y, width and height in pixels. Write them down; you will need all four.

Step 3 — composite.

ffmpeg -i frame.png -i clip.mp4 -filter_complex \
  "[1:v]scale=880:1908[v]; \
   [0:v][v]overlay=x=104:y=112:shortest=1[out]" \
  -map "[out]" -map 1:a? -c:v libx264 -crf 20 -pix_fmt yuv420p framed.mp4

Replace 880:1908 with your screen width and height, and x=104:y=112 with the screen's top-left corner. shortest=1 ends the output when the video ends rather than looping the still frame forever.

Step 4 — add a background. The output above has whatever was around the device in the PNG. To place it on a colour or gradient, composite a third layer underneath.

Good for: batch processing dozens of clips, generating frames in CI, or producing byte-identical output every run.

Bad for: anything that needs iteration. Every adjustment means editing coordinates and re-encoding. There is no preview, no 3D, no shadow, no reflection — the device is a flat sticker over your video.

Method 2: Screenify Studio

Screenify Studio is a macOS screen recorder, but since it added Open Media it opens existing files too — which is what makes it relevant here.

Step 1 — open the file. From the welcome screen, drag your video in or pick it. Drop several and they queue. MP4, MOV and M4V all work, as do still images if you are framing a screenshot instead.

Step 2 — turn on the device frame. In the Mockup tab, pick a body. Flat frames cover 47 iOS device models; the 3D stage adds MacBook, iMac, iMac Pro, Pro Display XDR and iPhone models with real perspective and lighting.

Step 3 — choose how the content sits. Cover, contain or fill. Cover crops to fill the screen; contain fits the whole frame and may letterbox; fill stretches. Cover is usually right — with a correctly cropped source, nothing important is lost.

Step 4 — add a background. Either a wallpaper from the built-in library, or a Realistic Mockup, which places the device inside an actual photograph matched to its perspective — a laptop on a café table, a phone in a hand.

Step 5 — optionally add a camera move. On a 3D stage, drop a motion segment on the timeline. Keyframes control distance, tilt and turn.

Step 6 — export. Up to 4K on a paid plan; the free plan exports 1080p up to five minutes with a watermark.

Good for: framing plus the rest of the job — captions, trimming, transitions, a watermark, export presets sized for social. And because it is a native app, the file never leaves your Mac.

Bad for: Windows and Linux, which it does not support. It is also more app than you need if a flat frame is genuinely all you want.

Method 3: Rotato

Rotato is the specialist. It does not record anything, which is irrelevant here because your clip already exists.

Step 1 — import. Rotato accepts 50+ image and video formats. There is also a Figma plugin if the source is a design.

Step 2 — pick a device from 30+ 3D models, then set colour and material.

Step 3 — animate. This is where Rotato pulls ahead. Rather than choosing from preset moves, you keyframe the device and camera on a timeline: rotation, position, focus, lens.

Step 4 — set the environment. Reflections, shadow style, background, or transparency if the mockup will be a layer in something else.

Step 5 — export, up to 8K.

Good for: when the mockup is the deliverable and you want art-directed 3D. Also good if you dislike subscriptions — Rotato sells one-time perpetual tiers.

Bad for: captions, audio, trimming, or anything beyond the mockup itself. You will still need another tool for those.

Method 4: Shots.so

A browser tool, which makes it the only option here that runs anywhere.

Step 1 — open shots.so and upload your clip.

Step 2 — pick a device and background. The background library is large and includes generated options that pull colours from your media.

Step 3 — apply an animation preset if you want movement.

Step 4 — export.

Good for: a fast one-off on any machine, with no install. The free tier covers occasional use.

Bad for: long or high-resolution clips, since browser encoding has a lower ceiling than a native app. Also note your file is uploaded to a server — fine for public content, worth thinking about for anything unreleased.

Which frame style fits the clip

"Device frame" covers four visually different things, and picking the wrong one is the difference between a shot that reads as professional and one that reads as decorated.

Flat frame — a device body, no perspective. The screen faces you square-on. Best for documentation, help-centre articles, App Store screenshots and anything where the content inside the frame is the point. It never competes with what it contains, and it survives being shrunk to a thumbnail.

3D stage — the device sits in space with real lighting. Perspective, reflections, a shadow on a surface. Best for landing-page hero shots and launch posts, where the device itself is part of the message. The cost is legibility: at an angle, text on the screen becomes hard to read, so use it when the impression matters more than the detail.

Photo scene — the device inside a real photograph. A laptop on a café table, a phone in someone's hand. Best for lifestyle and social posts where you want the product to feel used rather than presented. Weakest for anything technical, since the surroundings pull attention away from the screen.

Browser frame — a window, not a device. For web products this is often the right answer and the most overlooked. It removes the twenty tabs, the bookmark bar, the extension icons and the real URL, and replaces them with an address you type. It also stacks: a browser window can sit inside a laptop, which can sit inside a photo.

A quick rule that holds up: if a reader needs to read the screen, go flat. If they need to feel something about the product, go 3D or photo.

Getting the screen coordinates without guessing

If you take the ffmpeg route, eyeballing the screen rectangle in Preview is the slow part and the source of most misalignment. Two faster options.

Read the alpha channel. If the frame PNG has a genuinely transparent screen, ImageMagick can find its bounding box for you:

magick frame.png -alpha extract -threshold 50% \
  -format "%@" info:

That prints something like 880x1908+104+112 — width, height, then the x and y offset. Those are exactly the four numbers the overlay filter needs, in the same order.

Verify with a single frame before encoding the whole clip. Nothing is more annoying than a five-minute encode that turns out two pixels off:

ffmpeg -i frame.png -i clip.mp4 -filter_complex \
  "[1:v]scale=880:1908[v];[0:v][v]overlay=x=104:y=112[out]" \
  -map "[out]" -frames:v 1 check.png

Open check.png, confirm the alignment, then run the full command. This turns a ten-minute mistake into a two-second one.

Troubleshooting

The video looks soft inside the frame. You are scaling up. A 1280-wide clip stretched onto a 1170-wide phone screen at 2x is being asked for pixels it does not have. Either re-export the source at a higher resolution or accept a smaller output.

There are black bars inside the device screen. Aspect ratio mismatch — see the section above. Switching from contain to cover removes the bars by cropping instead.

The cursor is tiny or invisible. Once a full-screen recording sits inside a phone, a 1x cursor is a few pixels. There is no fix after the fact; the cursor is baked into the video. Next time, increase cursor size before recording.

Auto-zoom, click sounds and keystroke overlays do not work. They cannot, and this is worth understanding rather than treating as a bug. Those effects need the click and keystroke stream captured during recording. An imported file is just pixels — the events are gone. What still works on an imported clip is everything in the staging layer: device frames, backgrounds, zoom you place by hand, masks, callouts, captions, transitions and watermarks.

The exported file is enormous. Device mockups have large flat areas of gradient, which compress badly at default settings. Raise CRF to 26–30 for H.264; on a small embedded clip the difference is invisible and the file can halve.

The frame is dated. A current screenshot inside a three-year-old phone reads as old. For anything permanent — docs, landing pages — prefer a flat frame without an obvious model.

Audio disappeared. In the ffmpeg method, -map 1:a? carries audio from the second input. Drop it and you get silence. The ? makes it optional so the command does not fail on a clip with no audio track.

Exporting for where it will actually be seen

A framed clip that looks right in your editor can fall apart on the platform it was made for. Three destinations, three different sets of constraints.

Social feeds (X, LinkedIn, Threads). Autoplay is muted and the clip is small — often under 600px wide in a timeline. A phone frame at that size leaves the screen content around 200px across, which means on-screen text is gone. Either crop into the part that matters before framing, or accept that the clip is an impression rather than a demonstration. Keep it short; most feeds stop counting attention after a few seconds. Square or portrait output uses more of a phone screen than 16:9.

Landing pages. Here the clip loops silently while someone reads around it, so a seamless loop matters more than resolution. Shoot or cut so the last frame matches the first — a visible jump every few seconds is more distracting than a slightly lower bitrate. Keep the file small enough not to delay the page; a hero video over a few megabytes is worth compressing harder than feels comfortable.

Documentation and help centres. Legibility beats everything. Use a flat frame, crop tight to the UI being explained, and do not add camera movement — a reader is trying to follow a specific step, not admire the shot. If the clip is over about twenty seconds, it is probably two clips.

The common thread: decide the destination before you frame, not after. Cropping for a feed and cropping for docs pull in opposite directions, and no export setting reconciles them afterwards.

FAQ

Can I add a device frame to a video on Windows? Yes — Shots.so runs in any browser, Rotato has a web beta, and the ffmpeg method is cross-platform. Screenify Studio is macOS only.

Do I need to record in the app to use its device frames? Not in any of these. Screenify Studio's Open Media opens existing video and images directly; Rotato and Shots.so are import-only by design.

Which formats can I import? Screenify Studio takes MP4, MOV and M4V for video, plus PNG, JPG, WebP and HEIC for stills. Rotato lists 50+ image and video formats. Shots.so handles common web formats.

Can I put a video inside a laptop and a phone at the same time? Yes, in Screenify Studio — a multi-device scene stages two or three devices, each showing its own content, with one camera moving across the arrangement. Rotato can compose multiple devices too. Shots.so and the ffmpeg method are single-device.

Will the frame add a watermark? Screenify Studio's free plan watermarks exports; the paid plan does not. Rotato has no free tier. Shots.so's free tier has its own limits — check before you rely on it.

Can I make the background transparent? Rotato exports with transparency, which is the right choice if the mockup is a layer in a larger composition. Screenify Studio exports standard video formats.

Is there a way to do this in Final Cut or Premiere? Yes, with a frame PNG on a layer above your clip and a scale/position adjustment underneath — conceptually the ffmpeg method with a GUI. Reasonable if you are already editing there; heavy if this is the only reason to open an NLE.

How do I get a clean browser window instead of a device? Screenify Studio has a browser frame layer — ten window styles in light and dark, with an address you type. It stacks with a device frame, so a browser window can sit inside a MacBook.

Which method to pick

Batching many clips, or scripting it: ffmpeg. Painful once, free forever.

The clip needs more than a frame — captions, a trim, a social-sized export: Screenify Studio, and the whole mockup layer is in the free plan. Download it and open your file from the welcome screen.

The mockup is the deliverable and you want real 3D: Rotato.

One image, one tweet, any machine: Shots.so.

Related reading: Rotato alternative: record and stage in one app · How to make a Loom recording look professional · How to put a screenshot in an iPhone mockup