Notion Iframe Embedding: Complete Technical Reference

Iframe Basics

What is an Iframe?

<iframe src="URL" width="100%" height="600" frameborder="0"></iframe>

An iframe embeds one webpage inside another.

Key Attributes

AttributePurpose

srcURL to embed
width/heightDimensions
frameborderBorder (deprecated, use CSS)
loadingLazy loading
sandboxSecurity restrictions
allowPermissions

Notion-Specific Considerations

What Notion Embeds

Notion's embed block uses iframes for:

URL Requirements

Notion's Embed Block

Notion auto-detects many services:

Security Model

Same-Origin Policy

Iframes from different origins can't access parent:

X-Frame-Options

Servers can block iframe embedding:

X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN

Some sites block embedding.

Content Security Policy

Modern alternative:

Content-Security-Policy: frame-ancestors 'self' example.com

Advanced Techniques

Responsive Iframes

<div style="position: relative; padding-bottom: 56.25%;
  <iframe 
    style="position: absolute; width: 100%; height: 100%;"
    src="URL"
  ></iframe>
</div>

Lazy Loading

<iframe src="URL" loading="lazy"></iframe>

Sandbox Attribute

Restrict iframe capabilities:

<iframe src="URL" sandbox="allow-scripts allow-same-origin"></iframe>

PostMessage Communication

// Parent to iframe
iframe.contentWindow.postMessage('data', 'https://target-origin.com');
// Iframe to parent
parent.postMessage('response', 'https://parent-origin.com');

Embedding Notion Pages

Basic Embed

<iframe 
  src="https://workspace.notion.site/Page-id"
  style="width: 100%; height: 600px; border: none;"
></iframe>

Issues with Native Iframes

Solution: Notion Embed

Notion Embed handles:

FAQ

Why doesn't my site embed in Notion?

The site may block iframe embedding via X-Frame-Options.

Can iframes access Notion content?

No, same-origin policy prevents cross-origin access.

How do I resize iframes dynamically?

Use postMessage to communicate dimensions, or use Notion Embed.

Conclusion

Iframe embedding is powerful but complex:

Master your embeds!

Professional embedding →

---

Related: HTML Code | Troubleshooting