Why is my iframe blank when the code looks right?

Almost always because the site you are embedding refuses to be embedded. Two headers control this: X-Frame-Options (with DENY or SAMEORIGIN) and the newer frame-ancestors directive in a Content-Security-Policy. If either excludes your page, the browser blocks the frame and logs the reason in the console instead of showing anything. It is not something you can override from your side — the permission belongs to the other site, so the options are to ask them, use an embed URL they publish for the purpose, or host the content somewhere that allows it.

Should I use a percentage width or fixed pixels?

Percentage for anything that sits inside a page you do not fully control, which is most cases. A fixed pixel width wider than a phone screen forces the whole page to scroll sideways, and that is the single most common iframe bug on mobile. The "Scale with container" option goes further: it wraps the frame in a box that keeps your chosen aspect ratio at any width, which is what you want for anything video-shaped or dashboard-shaped.

What does the title attribute do, and do I need it?

It is the accessible name of the frame. A screen reader announces an iframe as a separate region of the page, and without a title it is announced as an unlabelled frame, which tells the listener nothing about whether to enter it. It costs one attribute and it is an accessibility failure to omit it, so the generator always includes one and falls back to a generic label if you leave it blank.

Is loading="lazy" safe to use?

Yes, and it is on by default here. It tells the browser to skip fetching the framed page until the reader scrolls near it, which matters because an iframe loads a whole second page — scripts, styles, images and all. For a frame below the fold that is a large saving for a reader who never scrolls that far. Turn it off only for a frame at the top of the page, where you want it loading immediately.

Can I embed a page I published on dochost?

Yes — published pages set frame-ancestors * on purpose, so any site can embed them and there is no allowlist to get added to. That is the deliberate difference from the tools in the answer above: if you need something embeddable and the original refuses, publishing it here gives you a URL that will render inside your frame. The publish button below produces a page that already contains your embed, if what you want is a shareable link rather than a snippet.

Iframe generator — build the embed code, then see if it works

Set the URL, size and behaviour, copy the tag. The preview tells you the thing most generators leave you to discover: whether that site allows being embedded at all.

Set the URL and size, copy the tag, and preview whether that site allows being embedded.

Page URL

Width

Height (px)

Title (read out by screen readers)

Scale with containerVisible borderAllow fullscreenLazy load

Embed code

Enter a URL above to get the embed code.

An <iframe> is one tag with a handful of attributes, and writing it by hand is not the hard part. The hard part is that a correct tag can still produce an empty rectangle, because embedding is permission the other site grants. If it sends X-Frame-Options: DENY, or a Content-Security-Policy with frame-ancestors that does not include you, the browser refuses to render it and reports the reason only in the developer console. Nothing appears on the page. No error, no placeholder — just a blank box that looks exactly like a mistake in your code.

So this builds the tag and then shows you the frame. Fill in the URL, choose whether it should scale with its container or sit at a fixed size, and copy the snippet. If the preview comes back blank, that is the answer to the question you would otherwise have spent an hour on: the code is fine and that site has opted out.

Three steps to a working embed

1. Paste the URL of the page you want to embed. A bare domain gets https added for you.
2. Set the size and behaviour — scale with container for a responsive box, or fixed pixels for a known slot.
3. Copy the tag into your page. Use the preview first to check the site actually allows being framed.

مثال حقيقي

Nadia is putting together an internal wiki page about a quarterly report. She wants the report itself visible on the page rather than behind another click, so she reaches for an iframe and pastes the first snippet a search gives her — a fixed width="600" height="400".

Two problems show up immediately. On a phone the 600px frame pushes the whole wiki page sideways, because a fixed pixel width does not know the screen is 390px across. And the report she is embedding is on a dashboard tool that sends X-Frame-Options: SAMEORIGIN, so the frame renders as a white rectangle and she spends twenty minutes checking her URL for typos.

She rebuilds it here. Ticking Scale with container wraps the frame in a ratio box so it fills the column at any width, and the preview is blank for the dashboard URL with the note explaining why — the tool refuses to be framed, and no snippet will change that. She publishes the report as a dochost page instead, embeds that, and it renders on the wiki and on her phone.

أسئلة حول iframe generator

احتفظ بروابطك إلى الأبد

الروابط المجانية تبقى 7 أيام مع حساب مجاني. وفي الخطط المدفوعة تبقى كل صفحة تنشئها متاحة بشكل دائم.

اطّلع على الأسعار

استخدامات ذات صلة

مثال حقيقي