Responsive Embed Code Generator
Paste a link from a supported service, pick an aspect ratio and write a short title. The generator turns the link into that service's official embed address and gives you responsive iframe code with lazy loading and an accessible title. A live preview and a privacy note for each provider appear before you copy the HTML.
| Provider | Embed shape |
|---|---|
| YouTube (including no-cookie mode) | 16:9 video |
| Vimeo | 16:9 video |
| Loom | Video |
| Google Maps embed link | Map |
| Spotify track, episode or playlist | Fixed-height player |
| Calendly booking page | Fixed height |
| Google Forms | Fixed height |
Updated
Paste a link from a supported provider, pick an aspect ratio and give the embed a title. You get iframe code that scales to any screen width, loads only when a visitor scrolls near it, and carries a title for screen reader users. A live preview shows the result, and a note for each provider tells you what it may track and whether a privacy-friendly option exists. Everything runs in your browser. Nothing you type or upload is sent to We.Inc or anyone else.
How it works
- Paste a link: a YouTube or Vimeo video, a Google Maps embed link, a Calendly booking page, a Spotify track or playlist, a Loom video or a Google Form.
- The tool recognises the provider and rewrites the link into that provider's official embed address. Links it does not recognise are refused rather than guessed.
- Choose the aspect ratio (16:9 for video, 4:3, 1:1, or a fixed height for booking pages and forms) and write a title that says what the embed is.
- Pick loading behaviour. Lazy loading is on by default so the embed does not slow the first view of the page.
- Check the live preview, then copy the HTML. The provider note lists what to mention in your privacy or cookie notice.
What each embed costs your visitors
An embed is a small window onto another company's page. It loads their scripts, can set their cookies and adds weight to your page. That is often worth it, but it should be a choice: lazy-load embeds below the first screen, use privacy-enhanced modes where they exist, and mention third-party embeds in your privacy notice.
Accessible embeds
Screen readers announce an iframe by its title. Without one, visitors hear "frame" and nothing else. A clear title, a text link to the same content under the embed, and captions on videos make embedded content usable by everyone.
Tips
- Give every iframe a title that describes its content, such as "Map to our shop on King Street". Screen readers announce it.
- Use youtube-nocookie.com for YouTube videos. It avoids setting YouTube cookies until the visitor presses play.
- Keep heavy embeds below the first screen or lazy-load them; each one loads a whole page from another site.
- Booking widgets, chat widgets and forms are the provider's product, not your website's. Their terms and data handling apply.
- For Google Maps, use Share, then Embed a map, then copy the address inside src. A normal maps link cannot be embedded.
Frequently asked questions
How do I make an iframe responsive?
Wrap it in a container that sets aspect-ratio (for example 16 / 9) and width: 100%, and make the iframe fill the container. Older sites used a padding-top trick; aspect-ratio is supported by all current browsers. This tool outputs the modern version.
Which providers are supported?
YouTube (including Shorts and youtu.be links), Vimeo, Google Maps embed links, Calendly, Spotify, Loom and Google Forms. Each has a documented embed address. Other links are refused so the tool never outputs code that will not work.
Does lazy loading hurt the embed?
No. loading="lazy" tells the browser to fetch the iframe only when it is close to the visible part of the page. Visitors who scroll to it see it load as normal.
Does We.Inc provide booking or chat?
No. Calendly and similar tools are separate services you sign up for with them. This tool only produces the code to show their widget on your page.
Why does my Google Maps link not work?
Normal maps.google.com and goo.gl links block embedding. Open the place in Google Maps, choose Share, then Embed a map, and paste the address from the src part of the code it shows you.
Related: HTML Table Generator, Schema Markup Generator, Website builder, Website Cost Calculator, Website Checker, Business website templates, Pricing.
Turn this result into your website or see the We.Inc website builder. The free plan gives you up to 3 template sites on a we.inc address, with no AI credits and no custom domain. Paid plans are Starter at $20 a month, Pro at $49 and Max at $99. See pricing.
More in Free Tools
- HTML Escape and HTML Entities List
- HTML Formatter
- HTML Link Generator
- HTML Minifier
- HTML Page Generator
- Accessible HTML Table Generator
- HTML to JSX Converter
- HTML to Markdown Converter
- Embed an Instagram feed on your website
- HTML video and iframe embeds
- Embed a responsive Google Map
- Embed Google Forms, Calendly and Typeform
Product
Who It's For
- For Agencies
- For Freelancers
- For Hosting Providers
- For SaaS Platforms
- For Startups
- For Financial Services
- For Healthcare
Features
Resources
- Blog
- Help Center
- Free Business Tools
- Free UI Components
- Website Templates
- Template Collections
- Website Examples
- Guides
- Comparisons
- Alternatives
- Best Lists
- Reviews
- Pricing Guides
- Use Cases
- Glossary & Guides
- Integrations
- Developers
- Benchmark
- Windows App