> 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 Anything in Gutenberg

Complete guide hub for embedding 100+ platforms in Gutenberg using Custom iFrame. Videos, audio, documents, forms, social media, Google services, and more.


## Overview

Custom iFrame lets you embed anything in Gutenberg by pasting a URL into the block. Videos, audio players, PDFs, Google services, social posts, forms, live streams, 3D models, and full websites all load directly on your page.

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

Using Elementor instead? See the [Embed Anything in Elementor](/elementor/embed-anything) guide.

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- WordPress with the Gutenberg block editor (WordPress 5.8+)
- A URL from any supported platform

## How to Embed in Gutenberg

Every embed follows the same three steps.

<Steps>
  <Step title="Copy the URL from your platform" icon="link" title-type="p">
    Go to the platform where your content lives. Use the share or copy-link option to get a public URL. Copy it to your clipboard.
  </Step>
  <Step title="Add the Custom iFrame block" icon="plus" title-type="p">
    Open your page in the Gutenberg block editor. Click the **Add Block** button. Search for **Custom iFrame**. Click the block to add it to the page.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1777223431/getting-started/installation/Custom-iFrame-Installation.webp"
      alt="WordPress Add New Plugin screen showing Custom iFrame by Coderz Studio in search results with Install Now button"
      width="1024"
      height="396" priority={true} fetchPriority="high" />
  </Step>
  <Step title="Paste the URL and publish" icon="clipboard" title-type="p">
    In the right panel, paste the URL into the **Source URL** field. Set **Height** to match your content. Click **Update** or **Publish**.
  </Step>
</Steps>

<Callout kind="success">
  That's it. The embed is live on your WordPress site.
</Callout>

## Browse by Content Type

Select a category to see every supported platform and a step-by-step embed guide.

<Columns cols="2">
  <Card title="Embed Videos in Gutenberg" href="/gutenberg/embed-videos" icon="play-circle" horizontal={false}>
    YouTube, Vimeo, Wistia, Dailymotion, Rumble, and more.
  </Card>
  <Card title="Embed Audio in Gutenberg" href="/gutenberg/embed-audio" icon="music" horizontal={false}>
    Spotify, SoundCloud, Boomplay, and more audio platforms.
  </Card>
  <Card title="Embed Documents in Gutenberg" href="/gutenberg/embed-documents" icon="file-text" horizontal={false}>
    PDFs, Google Docs, Sheets, Slides, Figma, and more.
  </Card>
  <Card title="Embed Google Services in Gutenberg" href="/gutenberg/embed-google-services" icon="map-pin" horizontal={false}>
    Google Maps, Google My Maps, and Google Calendar.
  </Card>
  <Card title="Embed Social Media in Gutenberg" href="/gutenberg/embed-social-media" icon="share-2" horizontal={false}>
    Facebook, Instagram, Instagram Reels, X, and LinkedIn.
  </Card>
  <Card title="Embed Forms in Gutenberg" href="/gutenberg/embed-forms" icon="clipboard" horizontal={false}>
    Typeform, HubSpot, JotForm, Calendly, and more form platforms.
  </Card>
  <Card title="Embed Websites in Gutenberg" href="/gutenberg/embed-websites" icon="globe" horizontal={false}>
    Embed any external URL, dashboard, or web app in Gutenberg.
  </Card>
</Columns>

## Advanced Features

Take embeds further with these block-level controls.

<Columns cols="2">
  <Card title="Auto-Refresh in Gutenberg" href="/gutenberg/advanced/iframe-auto-refresh" icon="refresh-cw" horizontal={false}>
    Reload the embedded iFrame at a set interval for live content.
  </Card>
  <Card title="Custom Attributes in Gutenberg" href="/gutenberg/advanced/iframe-custom-attributes" icon="code" horizontal={false}>
    Add custom HTML attributes to the iFrame element. (Pro)
  </Card>
  <Card title="Sandbox and Security in Gutenberg" href="/gutenberg/advanced/iframe-sandbox-security" icon="shield" horizontal={false}>
    Control sandbox permissions and referrer policy for embeds.
  </Card>
</Columns>

## Also in Elementor

Every embed category is also supported in the Elementor page builder.

See [Embed Anything in Elementor](/elementor/embed-anything) for the complete Elementor guide hub.

## Related Guides

- [Install Custom iFrame](/getting-started/installation)
- [Gutenberg Block Setup](/getting-started/gutenberg-setup)
- [Style Custom iFrame](/getting-started/styling)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)
- [Embed Blocked or Refused](/troubleshooting/embed-blocked)