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.

Open DevTools

On the page where the iFrame is blank, press F12 (Windows/Linux) or Cmd + Option + I (Mac) to open browser DevTools.

Go to the Console tab

Click the Console tab. Reload the page. Look for a red error message about the embedded URL.

Read the error message

Match your error to the causes below.

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.

Find the embed code on the platform

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.

Copy the full embed code

The platform provides HTML like this:

<iframe src="https://player.example.com/embed/VIDEO_ID"
  width="640" height="360" frameborder="0"
  allowfullscreen></iframe>

Extract only the src URL

Copy the URL from the src="..." attribute only. For the example above, that is:

https://player.example.com/embed/VIDEO_ID

Paste the src URL into Custom iFrame

Paste that URL into the Source URL field in Custom iFrame. Do not paste the full HTML — paste only the URL.

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.

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)

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.

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:

Go to WordPress Admin > Plugins. Confirm Custom iFrame shows as Active.
In Elementor or Gutenberg, confirm the Source URL field contains a valid URL.
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

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.

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.

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.

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.

Was this page helpful?

Last updated 1 day ago

Built with Documentation.AI