Iframe Embedding Tests

This page tests iframe embedding to ensure our markdown processing doesn't interfere with embedded content.

YouTube Video Embed

Google Maps Embed

CodePen Embed

Development Platform Embeds

JSFiddle Embed

Replit Embed

Observable Notebook Embed

Twitter/X Embed

Threads Embed

Instagram Embed

LinkedIn Embed

TikTok Embed

Custom Responsive Iframe

Iframe with Markdown Content Around It

Here's some regular markdown content before the iframe.

Important: The iframe below should render correctly and not be converted to a code block.

And here's content after the iframe with italic and bold formatting.

Multiple Iframes

First iframe:

Second iframe:

Iframe Protection Test

The following should render as an iframe, NOT as a code block:

Edge Cases

Iframe with No Attributes

Self-Closing Iframe Style

Code Block vs Iframe Test

This should be a code block:

<iframe src="https://example.com" width="300" height="200"></iframe>

But this should be an actual iframe:

Testing Notes

Iframe Categories Tested

Video Embeds: YouTube videos with various parameters
Maps: Google Maps with different locations and settings
Development Platforms: CodePen, JSFiddle, Replit, Observable
Social Media: Twitter/X, Threads, Instagram, LinkedIn, TikTok
Custom Responsive: Responsive wrapper patterns

Expected Behavior

Iframe Protection: All iframes should render as actual embedded content
No Code Conversion: None should be converted to code blocks by markdown processor
Responsive Design: Iframes should adapt to container width appropriately
Mixed Content: Markdown content should render properly around iframes
Accessibility: Iframes should have proper titles and ARIA labels
Security: All embeds should work within iframe sandbox restrictions

Browser Compatibility

Modern Browsers: All embeds should work in Chrome, Firefox, Safari, Edge
Mobile Devices: Touch interactions should work properly
Loading States: Iframes should show loading indicators while content loads
Error Handling: Failed embeds should show appropriate error messages

Performance Considerations

Lazy Loading: Consider implementing lazy loading for iframes below the fold
Resource Usage: Monitor memory and CPU usage with multiple embeds
Network Requests: Verify reasonable loading times for embedded content

Security Notes

Content Security Policy: Ensure CSP allows iframe sources
Sandboxing: Verify iframe sandbox attributes work correctly
Privacy: Test that embeds respect user privacy settings