About the HTML IFrame Generator
An <iframe> embeds one document inside another. Two attributes are worth setting every time. A title is what a screen reader announces when it reaches the frame, and without it the user hears only that there is a frame; validators flag its absence. Adding loading="lazy" defers the whole embedded document until it is close to the viewport, which on a page with a map or a video below the fold can save a megabyte of transfer on first paint.
The fixed width and height attributes give the browser an aspect ratio before the frame loads, so nothing jumps when it appears. The responsive option swaps that for a wrapper with 56.25% top padding, the classic 16:9 ratio, and an absolutely positioned frame that fills it, so the embed scales with the column on a phone.
The sandbox attribute is the security control. With no value it removes almost everything from the frame: scripts, forms, popups and same origin access. The option here adds back allow-scripts allow-same-origin, which suits an embed you host yourself; for third party content grant less. Be aware that those two tokens together let a same origin frame remove its own sandbox, so never pair them with content you do not trust. Many sites also refuse to be framed at all through the X-Frame-Options or frame-ancestors headers, which shows up as a blank frame and a console message rather than an error you can catch. To preview markup rather than a live URL, use the HTML Viewer.
How to use
- Paste the URL you want to embed.
- Write a short title describing the frame content.
- Set width and height, or switch on the responsive wrapper.
- Add sandbox or fullscreen if needed, then copy the tag.
Common questions
- Why is my iframe blank?
- The target site probably blocks framing with X-Frame-Options or a frame-ancestors policy. Nothing in your markup can override that.
- Does an iframe need a title?
- Yes for accessibility. Screen readers announce it, and validators report a missing title on frames.
- How do I make an embed responsive?
- Drop the fixed width and height and put the frame in a wrapper with padding-top set to the aspect ratio, which the responsive option here generates.
- Is sandbox with allow-scripts and allow-same-origin safe?
- Only for content you control. Together they let the frame remove its own sandbox, so third party embeds should get narrower permissions.