View Categories

How to Embed Instagram Reels in WordPress (Gutenberg)?

Table of Contents

With Custom iFrame, you can embed Instagram Reels in WordPress and display live reel content directly on any page or post in your Gutenberg block editor.

If you are using Elementor, follow this guide: How to Embed Instagram Reels in Elementor

Quick Summary

Step-by-step guide to embed Instagram Reels in WordPress

1. Copy the Instagram Reel link from Instagram.
2. Install and activate the Custom iFrame plugin.
3. Open your page in the block editor and add the Custom iFrame block.
4. Paste the Instagram Reel URL into the Source field.
5. Adjust settings and customize the display.
6. Save and publish your page.

Step 1: Get the Instagram Reel Link

  1. Open Instagram at https://www.instagram.com/.
  2. Navigate to the Reel you want to embed.
  3. Click the Share icon on the Reel, then click Copy Link.

Step 2: Install the Custom iFrame Plugin and Add the Block

  1. Go to your WordPress dashboard.
  2. Navigate to Plugins, then Add New.
  3. Search for “Custom iFrame by Coderz Studio” and press enter.
  4. Click Install Now, then click Activate.
This image shows the WordPress plugin “Custom iFrame for Elementor – Embed Pdf, Maps, Videos, & Websites Easily” by Coderz Studio. It allows secure, SEO-friendly, and responsive iFrame embedding in Elementor with features like lazy loading, auto-height adjustment, and dynamic URL support. The plugin has a 5-star rating from 4 reviews, over 3,000 active installations, and is marked compatible with the current WordPress version.
  1. Open your page in the Gutenberg block editor.
  2. Click the Add Block button and search for Custom iFrame.
  3. Click the Custom iFrame block to add it to the page.

Step 3: Embed the Instagram Reel in WordPress

  1. Select the Custom iFrame block.
  2. In the Source field, paste the Instagram Reel URL you copied earlier.

The Instagram Reel will load inside the iframe directly in the Gutenberg editor.

Screenshot showing how to embed Instagram Reel in WordPress, with a Gutenberg page editor open, a Custom iFrame block selected, and an Instagram Reel URL pasted into the Source URL field on the right panel settings.

Step 4: Adjust Settings

Once the Reel is embedded, you can configure the display settings in the Gutenberg block panel.

Height: Set the iframe height to suit the Reel and your page layout.

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

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

Smart Load: Enable lazy loading so the iframe loads only when it enters the viewport. This helps keep your page performance clean, especially if you have multiple embeds on one page.

Custom iFrame display settings panel showing options for height, auto height toggle, scrollbar visibility, and refresh interval—illustrating how to optimize embedded content with lazy load and dynamic sizing in WordPress Gutenberg.

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

Want to add a custom watermark, device frame, or full screen button? Check out the advanced options in our Complete Custom iFrame for Gutenberg Guide.

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