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 guide.

Requirements

Custom iFrame plugin installed and active
WordPress with the Gutenberg block editor
A public Instagram Reel URL to embed

Step 1: Get the Instagram Reel Link

Open Instagram and find your Reel

Go to instagram.com and open the Reel you want to embed.

Copy the Reel link

Click the Share icon on the Reel. Click Copy Link.

Step 2: Install the Plugin and Add the Block

Install and activate the plugin

Go to your WordPress dashboard. Go to Plugins > Add New. Search for Custom iFrame by Coderz Studio, click Install Now, then click Activate.

Custom iFrame for Elementor WordPress plugin by Coderz Studio showing 3000+ active installations on the plugin repository page

Open your page in the block editor

Go to the page or post where you want the Reel. Click Edit to open the Gutenberg block editor.

Add the Custom iFrame block

Click the Add Block button and search for Custom iFrame. Click the block to add it to the page.

Gutenberg block editor with Custom iFrame block selected and an Instagram Reel URL pasted into the Source URL field in the right panel settings

Step 3: Embed Instagram Reels in Gutenberg

Paste the Reel URL

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 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.

Custom iFrame block settings panel in Gutenberg showing height, auto height toggle, scroll bar, and refresh interval options

Click Update or Publish. Your Instagram Reel is now live on your WordPress site.

Want to add a custom watermark (Pro), device frame (Pro), or full screen button? See the Set Up Custom iFrame in Gutenberg 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

No. You can copy the Reel link from any public profile without logging in. Reels from private accounts cannot be embedded.

Reels use a vertical 9:16 format. Set height to at least 600px. Enable Auto Height to let the iframe resize automatically.

The Reel must be from a public account. Private profiles require a login and cannot be embedded. See iFrame Not Showing for more help.

Yes. Copy the post link and paste it into the Source field. See the Embed Instagram Post in Gutenberg guide for details.

Also Available For

Embed Instagram Reel in Elementor

Guide for the Elementor widget.

Embed Instagram Post in Gutenberg

Embed standard Instagram posts in Gutenberg.

Was this page helpful?

Last updated today

Built with Documentation.AI