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

# Placeholder Image

Show a custom image while an embedded iFrame loads in Elementor and Gutenberg using the Custom iFrame WordPress plugin.


## Overview

Custom iFrame Placeholder Image displays a custom image in the iFrame area while the embed loads. Instead of a blank white box, visitors see a meaningful preview image that sets expectations for the content below.

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

Placeholder Image is a free feature. No Pro plan required.

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- WordPress with Elementor or the Gutenberg block editor
- An image uploaded to your WordPress media library

## When to Use a Placeholder Image

Use a placeholder image whenever an embed takes more than a second to load:

- **Lazy-loaded embeds:** The placeholder fills the space until the visitor scrolls to trigger the load
- **Large pages with multiple embeds:** Reduces the visual impact of loading states
- **Video embeds:** Use a thumbnail to set context before the player loads
- **Maps:** Use a static map screenshot to fill the space before the interactive map loads

<Callout kind="tip">
  The best placeholder image is a screenshot of the embedded content itself. Visitors see what to expect and the transition to the live embed feels natural.
</Callout>

## How to Set a Placeholder Image

### In Elementor

<Steps>
  <Step title="Open your page in Elementor" icon="layout" title-type="p">
    Go to the page with the Custom iFrame widget. Click **Edit with Elementor**.
  </Step>
  <Step title="Enable Lazy Load" icon="zap" title-type="p">
    In the **Content** tab, set **Lazy Load** to **Yes**. The placeholder image upload area appears below the toggle.
  </Step>
  <Step title="Upload the placeholder image" icon="image" title-type="p">
    Click the image upload area. Select an image from your media library or upload a new one. The image fills the iFrame area while the embed loads.
  </Step>
  <Step title="Publish" icon="check" title-type="p">
    Click **Update** or **Publish**. The placeholder shows on the live page until the embed loads.
  </Step>
</Steps>

### In Gutenberg

<Steps>
  <Step title="Open your page in the block editor" icon="layout" title-type="p">
    Go to the page with the Custom iFrame block. Click **Edit**.
  </Step>
  <Step title="Enable Smart Load" icon="zap" title-type="p">
    In the block settings panel, turn on **Smart Load**. The placeholder image upload area appears.
  </Step>
  <Step title="Upload the placeholder image" icon="image" title-type="p">
    Click the image upload area. Select an image from your media library or upload a new one.
  </Step>
  <Step title="Publish" icon="check" title-type="p">
    Click **Update** or **Publish**. The placeholder image is now live.
  </Step>
</Steps>

<Callout kind="success">
  The placeholder image now shows in the iFrame area until the embedded content finishes loading.
</Callout>

## Best Practices

- **Match the dimensions:** Use an image with a similar aspect ratio to the embed. A 16:9 image works well for video players.
- **Use a screenshot:** Take a screenshot of the embedded content and upload it. Visitors see a realistic preview.
- **Keep it light:** Use a compressed WebP or JPEG. The placeholder should load fast.
- **Avoid text-heavy images:** Text in a placeholder image may confuse visitors who mistake it for live content.

## FAQ

<ExpandableGroup>
  <Expandable title="Does the placeholder image require Lazy Load to be enabled?" default-open="false">
    Yes. The placeholder image field appears after enabling Lazy Load (Elementor) or Smart Load (Gutenberg). Enable the lazy load toggle first to reveal the image upload area.
  </Expandable>
  <Expandable title="What image format should I use?" default-open="false">
    WebP gives the smallest file size with good quality. JPEG works well as an alternative. Avoid PNG for photographs as the file size is larger without visible quality gains.
  </Expandable>
  <Expandable title="Does the placeholder image show in Elementor's editor preview?" default-open="false">
    The iFrame itself loads in the Elementor editor, so the placeholder typically does not show in the editor preview. It appears on the live published page while the embed is loading.
  </Expandable>
  <Expandable title="Can I use the same placeholder image across multiple embeds?" default-open="false">
    Yes. Upload the image once to your media library. Select it for each Custom iFrame widget or block where you want to use it as a placeholder.
  </Expandable>
</ExpandableGroup>

---

## Related Guides

- [Set Up Custom iFrame in Elementor](/getting-started/elementor-setup)
- [Set Up Custom iFrame in Gutenberg](/getting-started/gutenberg-setup)
- [Lazy Loading (Smart Load)](/features/lazy-loading)
- [Auto Height Adjustment](/features/auto-height)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)