> For the complete documentation index, see [llms.txt](https://docs.customiframe.com/llms.txt).
> Use it to discover all available pages before exploring further.

# Embed Instagram Reels in Gutenberg

Step-by-step guide to embed Instagram Reels in Gutenberg using the Custom iFrame WordPress plugin. No coding required.


## Overview

Custom iFrame lets you embed Instagram Reels in Gutenberg by pasting any Reel link into the block. Display live reel content directly on any page or post in the WordPress block editor.

Custom iFrame is a WordPress plugin by CoderzStudio that embeds 100+ external sources in Elementor and Gutenberg without writing any code.

Using Elementor instead? Follow the [Embed Instagram Reel in Elementor](/elementor/social/embed-instagram-reels) guide.

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- WordPress with the Gutenberg block editor
- A public Instagram Reel URL to embed

## Step 1: Get the Instagram Reel Link

<Steps>
  <Step title="Open Instagram and find your Reel" icon="instagram" title-type="p">
    Go to [instagram.com](https://www.instagram.com) and open the Reel you want to embed.
  </Step>
  <Step title="Copy the Reel link" icon="link" title-type="p">
    Click the **Share** icon on the Reel. Click **Copy Link**.
  </Step>
</Steps>

## Step 2: Install the Plugin and Add the Block

<Steps>
  <Step title="Install and activate the plugin" icon="download" title-type="p">
    Go to your WordPress dashboard. Go to **Plugins > Add New**. Search for **Custom iFrame by Coderz Studio**, click **Install Now**, then click **Activate**.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1777223431/getting-started/installation/Custom-iFrame-Installation.webp"
      alt="Custom iFrame for Elementor WordPress plugin by Coderz Studio showing 3000+ active installations on the plugin repository page"
      width="818"
      height="363" priority={true} fetchPriority="high" />
  </Step>
  <Step title="Open your page in the block editor" icon="layout" title-type="p">
    Go to the page or post where you want the Reel. Click **Edit** to open the Gutenberg block editor.
  </Step>
  <Step title="Add the Custom iFrame block" icon="plus" title-type="p">
    Click the **Add Block** button and search for **Custom iFrame**. Click the block to add it to the page.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776999083/gutenberg/social/instagram-reels/embed-instagram-reel.webp"
      alt="Gutenberg block editor with Custom iFrame block selected and an Instagram Reel URL pasted into the Source URL field in the right panel settings"
      width="1024"
      height="463" priority={true} fetchPriority="high" />
  </Step>
</Steps>

## Step 3: Embed Instagram Reels in Gutenberg

<Steps>
  <Step title="Paste the Reel URL" icon="clipboard" title-type="p">
    Select the Custom iFrame block. In the **Source** field in the right panel, paste the Instagram Reel URL you copied. The Reel loads inside the block in the editor.
  </Step>
</Steps>

## Step 4: Adjust Settings and Publish

**Height:** Set to at least 600px for a full Reel player. Reels use a vertical format, so 700px to 900px gives the best display.

**Scroll Bar:** Enable or disable the scrollbar inside the embedded content.

**Refresh Interval:** Set how often the iframe refreshes. Useful if you want the latest engagement data to reload.

**Smart Load:** Turn on lazy loading so the iframe loads only when it enters the viewport. This keeps page performance strong.

<Image
  src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776999086/gutenberg/social/instagram-reels/basic-settings.webp"
  alt="Custom iFrame block settings panel in Gutenberg showing height, auto height toggle, scroll bar, and refresh interval options"
  width="329"
  height="639"
/>

<Callout kind="success">
  Click **Update** or **Publish**. Your Instagram Reel is now live on your WordPress site.
</Callout>

Want to add a custom watermark (Pro), device frame (Pro), or full screen button? See the [Set Up Custom iFrame in Gutenberg](/getting-started/gutenberg-setup) guide for all block options.

This guide showed you how to embed Instagram Reels in Gutenberg using the Custom iFrame plugin. From copying the Reel link to pasting the URL and publishing, the whole setup runs through the block editor without any code.

## FAQ

<ExpandableGroup>
  <Expandable title="Do I need an Instagram account to embed a Reel?" default-open="false">
    No. You can copy the Reel link from any public profile without logging in. Reels from private accounts cannot be embedded.
  </Expandable>
  <Expandable title="What height works best for an Instagram Reel?" default-open="false">
    Reels use a vertical 9:16 format. Set height to at least 600px. Enable Auto Height to let the iframe resize automatically.
  </Expandable>
  <Expandable title="Why does the Reel show blank?" default-open="false">
    The Reel must be from a public account. Private profiles require a login and cannot be embedded. See [iFrame Not Showing](/troubleshooting/iframe-not-showing) for more help.
  </Expandable>
  <Expandable title="Can I embed a standard Instagram post instead?" default-open="false">
    Yes. Copy the post link and paste it into the Source field. See the [Embed Instagram Post in Gutenberg](/gutenberg/social/embed-instagram) guide for details.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

<Columns cols="2">
  <Card title="Embed Instagram Reel in Elementor" href="/elementor/social/embed-instagram-reels" icon="layers" horizontal={false}>
    Guide for the Elementor widget.
  </Card>
  <Card title="Embed Instagram Post in Gutenberg" href="/gutenberg/social/embed-instagram" icon="instagram" horizontal={false}>
    Embed standard Instagram posts in Gutenberg.
  </Card>
</Columns>

## Related Guides

- [Embed Social Media in Gutenberg WordPress - Overview](/gutenberg/embed-social-media)
- [Embed Instagram Post in Gutenberg](/gutenberg/social/embed-instagram)
- [Embed X Post in Gutenberg](/gutenberg/social/embed-twitter-x)
- [Auto Height Adjustment](/features/auto-height)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)