Embedding another page, a map, a video, or a document usually comes down to one iframe element, but the details decide whether it behaves: the size, the loading strategy, the title for screen readers, and whether fullscreen is allowed. Copying an embed snippet from a provider gives you their choices, not yours, and hand-writing the tag invites a missed quote or a forgotten title. This generator builds a clean iframe element from your source URL, dimensions, loading choice, and options, ready to paste into any page. It builds the code; whether the target allows embedding depends on its own frame policy.
Quick Answer: Enter the source URL, size, and loading option, then click Build Embed Code.
Free Online Tool
iFrame Embed Code Generator
Build iframe embed code from a source URL, size, and loading attributes.
How to Use the iFrame Embed Code Generator
- Paste the full source URL to embed, including https://.
- Enter the width and height in pixels.
- Add a descriptive title for accessibility.
- Choose lazy loading for below-the-fold embeds or eager for above-the-fold.
- Tick fullscreen if the embed should allow it.
- Click Build Embed Code and paste the result into your page.
Key Features
- Builds a complete iframe element with all attributes.
- Supports width and height in pixels.
- Adds lazy or eager loading attributes.
- Includes a title attribute for screen readers.
- Optionally allows fullscreen playback.
- Runs entirely in the browser; nothing is embedded automatically.
What the Result Means
The src is the page being embedded, and the width and height set the box it occupies before it loads, which prevents layout shift when the content arrives. Loading lazy defers offscreen embeds until the visitor scrolls near them, improving page speed, while eager loads immediately, which suits embeds at the top of the page. The title is not decoration: screen readers announce it, so a missing title leaves the embed anonymous. If the embed shows blank, the target almost certainly sends a frame-ancestors policy that forbids embedding, and no attribute here can override that.
Worked Example
A blog post embeds a map of a venue. Entering the map URL, width 800, height 450, a title of Venue map, and lazy loading produces an iframe that loads only when readers scroll to it, occupies a stable 800 by 450 box, and announces itself as a venue map to screen readers. If the map provider later blocks framing, the same code with a link to the map instead is the honest fallback, since no embed code can override the provider policy. For pages where the embed is the main content, eager loading is the better choice, because lazy loading would delay the very thing the visitor came to see, while for a map tucked at the bottom of a long article, lazy loading keeps the initial page fast.
Best Practices and Tips
- Use lazy loading for embeds below the fold to speed up initial page loads.
- Always set width and height to avoid layout shift.
- Write a title that says what the embed is, not just the word embed.
- Test the embed on mobile, where fixed pixel sizes may overflow.
- Respect the target terms: only embed content you have the right to display.
Common Mistakes to Avoid
- Forgetting the title attribute, leaving the embed unnamed for assistive tools.
- Using lazy loading for an above-the-fold embed, delaying visible content.
- Setting fixed sizes that overflow small screens.
- Assuming a blank embed is a code error when the target blocks framing.
Frequently Asked Questions
What is an iframe?
An inline frame: a window inside a page that displays another document.
Why does my embed show blank?
The target likely sends X-Frame-Options or a frame-ancestors policy that forbids embedding.
What does loading lazy do?
It defers loading the embed until it is near the viewport, improving page performance.
Can I make an embed responsive?
Yes, by wrapping it in a container with CSS aspect-ratio rules, using the generated code as the starting point.