ConvertOwl

Instagram Embed Generator - Resize and Center Instagram Embeds

Instagram's embed code is locked to 540px and sits hard against the left of your content, because Instagram writes those rules onto the embed as inline styles. Paste your code, set a width and alignment, and copy back a snippet that works in WordPress, Squarespace, Webflow, Ghost or plain HTML.

Loading tool…

How to use this tool

  1. Paste your embed code or post URL

    Drop in Instagram's full embed code, just the blockquote, or simply the post link - /p/, /reel/ and /tv/ URLs all work. Broken snippets that lost their script tag or came back mangled from a markdown editor are repaired automatically.

  2. Set the width and alignment

    Drag the width slider between 326px and 540px, the range Instagram actually honours, or choose "fill container". Pick left, center or right - centering is exact at every width because the wrapper is centered, not the embed.

  3. Check the live preview

    Load the preview to see the real, hydrated embed at your settings, and switch between desktop, tablet and mobile column widths. The preview rebuilds itself on every change, so the height you see is the height you will get.

  4. Copy the code and paste it in

    Copy the full HTML, the version without the script tag, or a single global CSS rule instead. In WordPress, paste into the Text or Custom HTML view - the Visual editor strips the script tag and the embed will not appear.

Frequently Asked Questions

Why is my Instagram embed stuck on the left?

Your embed sits on the left because Instagram's script sets margin: 0 0 12px directly on the embed as an inline style, leaving no left or right margin to center it. Nothing in your theme causes this, and no ordinary CSS rule can beat an inline style. The fix is to wrap the embed in a container with margin-left: auto and margin-right: auto, which is exactly what this tool generates.

Why won't my Instagram embed go wider than 540px?

Instagram caps the embed at 540px with an inline max-width on the iframe it creates, so a wider container has no effect at all. The supported range is 326px to 540px - below 326px the embed overflows rather than shrinking. This tool offers an advanced override that forces a wider box with !important, but Instagram does not support it and the media is upscaled past its source resolution, so it can look soft.

Can I set the height of an Instagram embed?

You cannot set the height with CSS, because Instagram's script measures its own content and pushes the height into the embed after it loads, overriding anything you declare. This tool handles that honestly with two modes: "calculate height" predicts the height you will get at your chosen width and emits no height CSS, while "force exact ratio" wraps the embed in a real aspect-ratio box that does constrain it but crops the caption and footer.

Do I need the Instagram script tag on every embed?

No - embed.js is only needed once per page, no matter how many embeds that page contains. If your theme or another embed already loads it, use the "without script" output to keep your HTML clean. If nothing else on the page loads it, keep the script tag, or the blockquote will never turn into a real post.

Why did my Instagram embed disappear in WordPress?

WordPress's Visual editor strips out script tags, so pasting an embed there silently removes the loader and leaves a blank space or a bare link. Paste into the Text tab in the Classic editor, or into a Custom HTML block in the block editor, and the embed will render. The same rule applies to any editor that sanitizes HTML on save.

Does this work with Instagram Reels?

Yes, Reels work exactly like posts - paste a /reel/ or /reels/ URL, or the embed code Instagram gives you for a Reel, and it is normalized to the canonical permalink. Reels are tall 9:16 media, so pick the Reel shape in the ratio section to see the expected height at your chosen width before you paste the code into your page.

Is my embed code sent anywhere?

No, the code generation happens entirely in your browser - parsing your snippet and building the new one involve no network requests at all. The one exception is the live preview, which is off until you click it and which loads Instagram's script from Instagram to render a genuine embed in a separate frame on the page. Skip the preview and nothing leaves your device.

Something not working? Report a bug