How to embed a video in HTML: a responsive iframe, step by step
Updated: October 28, 2026
To “embed” a video means showing it inside your page as if it were part of it, even though the file lives somewhere else. It’s the right way to publish video on a website: it doesn’t load your hosting, adapts to every screen and plays at adaptive quality. In this guide you’ll get the exact code, what each attribute does and how to avoid the most frequent mistakes.
What an embed is: iframe or <video> tag
There are two ways to put a video in HTML. The <video> tag plays a file (an MP4, for example) straight from your server: it’s simple, but the file is served as-is, with no adaptive quality or stats, and it uses your hosting’s bandwidth.
An iframe embeds a video service’s player. The file is served by that service, with adaptive quality, subtitles and controls, and on your site you only paste one line of code. That’s what YouTube, Vimeo or Dembed give you as an “embed code”.
The responsive embed code (recommended)
With the CSS aspect-ratio property, supported by every modern browser, the iframe fills the available width and works out its own height, with no extra wrappers:
<iframe src="https://dembed.cc/embed/v_YOUR_ID" title="My video" style="width:100%;aspect-ratio:16/9;border:0" allow="autoplay; fullscreen; picture-in-picture; encrypted-media" allowfullscreen loading="lazy"></iframe>The classic version (maximum compatibility)
If your theme is old or the editor strips styles, use the wrapper trick: padding-top: 56.25% is the 16:9 ratio (9 ÷ 16). It’s the format the “Responsive” button in the Dembed dashboard copies:
<div style="position:relative;width:100%;padding-top:56.25%"><iframe src="https://dembed.cc/embed/v_YOUR_ID" title="My video" style="position:absolute;inset:0;width:100%;height:100%;border:0" allow="autoplay; fullscreen; picture-in-picture; encrypted-media" allowfullscreen loading="lazy"></iframe></div>What each attribute means
- src: the player’s address. On Dembed it looks like https://dembed.cc/embed/ID.
- title: describes the video for screen readers. It’s an accessibility requirement and helps SEO.
- allow: the player’s permissions (autoplay, fullscreen, picture-in-picture). Without them, some buttons won’t work.
- allowfullscreen: enables the fullscreen button.
- loading="lazy": the iframe isn’t loaded until the visitor gets close to it. Improves speed and Core Web Vitals.
- style="border:0": removes the grey border browsers add to iframes by default.
Autoplay, vertical and square videos
Browsers only allow autoplay if the video starts muted. On Dembed you enable it by adding ?autoplay=1 to the end of the embed address.
For vertical videos (Reels, Shorts, TikTok) change the ratio to 9/16 and cap the width so it doesn’t take over a desktop screen:
<iframe src="https://dembed.cc/embed/v_YOUR_ID?autoplay=1" title="My vertical video" style="width:100%;max-width:360px;aspect-ratio:9/16;border:0" allow="autoplay; fullscreen; picture-in-picture; encrypted-media" allowfullscreen loading="lazy"></iframe>Where to paste the embed code
- Your own HTML: paste it where you want the video to appear, inside the <body>.
- WordPress: in a “Custom HTML” block (we have a step-by-step guide).
- Blogger: in the post’s “HTML view” or in an HTML/JavaScript gadget.
- Wix, Webflow, Squarespace, Shopify and other builders: if your platform has an “HTML”, “Embed” or “Custom code” block, paste the iframe there.
Common errors (and how to fix them)
- The video doesn’t show and has zero height: the ratio is missing. Use aspect-ratio or the padding-top wrapper.
- “Blocked content” or “mixed content”: your site is on https and the iframe on http. Always use the https address.
- “This site doesn’t allow embedding”: some services block iframes on other sites (X-Frame-Options or frame-ancestors headers). Use the service’s official embed link, not the regular video page.
- The editor deletes the code: switch to HTML view or use a custom HTML block; visual editors sometimes strip iframes.
Frequently asked questions
A snippet of HTML (usually an iframe) that shows content hosted on another service, such as a video, on your site without uploading the file to your server.