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

# iFrame Not Showing

Fix a blank or missing iFrame in Custom iFrame for Elementor and Gutenberg. Diagnose blocked embeds, wrong URLs, and plugin configuration issues.


## Overview

A blank iFrame in Custom iFrame is almost always caused by one of four things: the embedded site blocks iFrame display, the URL is wrong, the content requires a login, or there is a mixed HTTP/HTTPS conflict. This guide walks through each cause with a specific fix.

## Step 1: Check the Browser Console for Errors

Before trying anything else, open your browser's developer tools and check the console for an error message. This tells you the exact cause.

<Steps>
  <Step title="Open DevTools" icon="terminal" title-type="p">
    On the page where the iFrame is blank, press **F12** (Windows/Linux) or **Cmd + Option + I** (Mac) to open browser DevTools.
  </Step>
  <Step title="Go to the Console tab" icon="terminal" title-type="p">
    Click the **Console** tab. Reload the page. Look for a red error message about the embedded URL.
  </Step>
  <Step title="Read the error message" icon="search" title-type="p">
    Match your error to the causes below.
  </Step>
</Steps>

---

## Cause 1: The Site Blocks iFrame Embedding

**Console error:** `Refused to display 'URL' in a frame because it set 'X-Frame-Options' to 'sameorigin'` or `Refused to frame 'URL' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'"`

The embedded site sends one of two HTTP response headers that instruct the browser to refuse iframe display:

- **`X-Frame-Options: DENY`** — the site blocks all iframe embedding, regardless of origin
- **`X-Frame-Options: SAMEORIGIN`** — the site allows embedding only from pages on the same domain
- **`Content-Security-Policy: frame-ancestors 'none'`** — same effect as DENY, using the modern CSP approach
- **`Content-Security-Policy: frame-ancestors 'self'`** — same effect as SAMEORIGIN, using CSP

These headers are set by the embedded site. You cannot override them from your WordPress site or from the Custom iFrame plugin.

**Fix: Use the embed URL from the platform's iframe embed code**

Many platforms that restrict their regular page URL still provide a separate embed URL specifically designed for iframe use. This embed URL is served without restrictive headers.

<Steps>
  <Step title="Find the embed code on the platform" icon="code" title-type="p">
    Go to the platform where your content lives. Look for a **Share**, **Embed**, or **Get embed code** option. This is usually found in the Share menu or the video/content settings.
  </Step>
  <Step title="Copy the full embed code" icon="clipboard" title-type="p">
    The platform provides HTML like this:

    ```html
    <iframe src="https://player.example.com/embed/VIDEO_ID"
      width="640" height="360" frameborder="0"
      allowfullscreen></iframe>
    ```
  </Step>
  <Step title="Extract only the src URL" icon="link" title-type="p">
    Copy the URL from the `src="..."` attribute only. For the example above, that is:

    ```
    https://player.example.com/embed/VIDEO_ID
    ```
  </Step>
  <Step title="Paste the src URL into Custom iFrame" icon="paste" title-type="p">
    Paste that URL into the **Source URL** field in Custom iFrame. Do not paste the full HTML — paste only the URL.
  </Step>
</Steps>

<Callout kind="info">
  This works because the embed URL points to a player or embed endpoint that the platform intentionally allows to be iframed. The regular page URL may be restricted, but the embed URL is not.
</Callout>

**Platforms where this applies:**

| Platform | Regular page URL | Embed src URL |
|---|---|---|
| Google Maps | `maps.google.com/...` | `google.com/maps/embed?pb=...` |
| Facebook posts | `facebook.com/post/...` | `facebook.com/plugins/post.php?href=...` |
| Vimeo | `vimeo.com/VIDEO_ID` | `player.vimeo.com/video/VIDEO_ID` |
| Spotify | `open.spotify.com/track/...` | `open.spotify.com/embed/track/...` |
| Google Calendar | `calendar.google.com/...` | `calendar.google.com/calendar/embed?...` |
| Calendly | `calendly.com/user/event` | `calendly.com/assets/external/widget.js` (use the direct link instead) |

<Callout kind="alert">
  If a platform does not provide an iframe embed code, its content cannot be embedded in an iframe. No workaround exists for sites that block all framing without providing an embed URL.
</Callout>

---

## Cause 2: Mixed Content (HTTP URL on an HTTPS Site)

**Console error:** `Mixed Content: The page at 'https://yoursite.com' was loaded over HTTPS, but requested an insecure frame 'http://...'`

If your WordPress site runs on HTTPS and the Source URL starts with `http://`, the browser blocks the iframe as mixed content. This is a browser security rule, not a plugin setting.

**Fix:** Change the URL to `https://` if the embedded site supports it. If the embedded site does not support HTTPS, the content cannot be embedded.

---

## Cause 3: The Content Requires Authentication

If the embedded URL is behind a login, password, or access restriction, the browser loads the login page inside the iframe instead of the content. The iframe appears blank or shows a login prompt.

**Fix:** Make the content public on the source platform. Private content, password-protected pages, and paywalled content cannot be embedded.

---

## Cause 4: The Plugin Is Not Active or the URL Field Is Empty

**Fix:**

1. Go to **WordPress Admin > Plugins**. Confirm Custom iFrame shows as **Active**.
2. In Elementor or Gutenberg, confirm the **Source URL** field contains a valid URL.
3. If you see no Custom iFrame widget in Elementor, go to **Elementor > Tools > Regenerate Files & Data** and reload the editor.

---

## Cause 5: An Ad Blocker or Browser Extension Is Blocking the Embed

Some browser extensions block specific domains or all iframes. The block only affects your browser session, not other visitors.

**Fix:** Test the page in an incognito or private window with extensions disabled. If the embed loads there, the issue is your browser extension, not the plugin.

---

## FAQ

<ExpandableGroup>
  <Expandable title="The iframe loads in the editor but not on the published page. Why?" default-open="false">
    The Elementor editor runs in a different browser context than the frontend. Check the published page URL directly. If it works in the editor but not on the frontend, check for a caching plugin serving a stale version of the page. Clear all caches and reload.
  </Expandable>
  <Expandable title="The embed worked before and stopped working. What changed?" default-open="false">
    The embedded site likely updated its security headers to restrict framing. Check the browser console for an X-Frame-Options or CSP error. If the platform provides an embed code, switch to the src URL from that code.
  </Expandable>
  <Expandable title="Can I force an iframe to load even if the site blocks it?" default-open="false">
    No. X-Frame-Options and Content-Security-Policy headers are enforced by the browser. There is no client-side way to bypass them. The only solution is to use an embed URL the platform provides for iframing, or to use a server-side proxy — which introduces legal and performance concerns well outside the scope of this plugin.
  </Expandable>
  <Expandable title="The iframe shows a blank white box with no console error. What is wrong?" default-open="false">
    Check that the Source URL is correct and publicly accessible. Open the URL directly in a new browser tab. If it loads there but not in the iframe, the site is likely blocking frames without sending a console-visible error. Try the embed src URL approach described in Cause 1.
  </Expandable>
</ExpandableGroup>

---

## Related Guides

- [Embed Blocked or Refused](/troubleshooting/embed-blocked)
- [iFrame Height Fix](/troubleshooting/iframe-height-fix)
- [Set Up Custom iFrame in Elementor](/getting-started/elementor-setup)
- [Set Up Custom iFrame in Gutenberg](/getting-started/gutenberg-setup)