Content Settings
Dimensions
Options
Generated Embed Code
// Your embed code will appear here
// Fill in the settings and click "Generate Embed Code"Live Preview
Preview will appear here after generating code.
Our embed code generator builds ready to paste HTML for YouTube videos, Google Maps, social posts, Spotify, SoundCloud, PDFs and any web page. Paste a URL, set the width and height, add a responsive 16:9 wrapper, a border or fullscreen, and copy the code. It runs in your browser, is free and needs no sign-up.
YouTube, Google Map, Twitter / X, Instagram, Spotify, SoundCloud, PDF Document and Generic iFrame in one place.
Tick one box to wrap the embed in a 16:9 container that scales with the screen width.
Set width and height, add a border and allow fullscreen without editing HTML by hand.
Check the embed in the Live Preview panel, then copy the code with one click.
Three steps from a blank form to a result you can use.
Pick the content type from the list and paste the public URL of the video, map, post, track or page.
Enter width and height, then tick responsive 16:9, border or fullscreen as needed.
Click Generate Embed Code, check the Live Preview, copy the code and paste it into your site's HTML block.
Embed code is a short piece of HTML that shows content from another site inside your page. Most embeds use an iframe element, while some social platforms add their own script.
| Content Type | URL to paste | Good to know |
|---|---|---|
| YouTube Video | The video's watch or share link | Use the responsive wrapper so the player scales on mobile |
| Google Map | The link to a place or map | Maps also look best in a responsive wrapper |
| Twitter / X Post | The link to a single post | Social posts may rely on the platform's own embed script |
| Instagram Post | The link to a public post | The generated code loads Instagram's embed.js script |
| Spotify | A track, album or playlist link | Set a fixed height for a compact player |
| SoundCloud Track | The public track link | Private tracks will not play for visitors |
| PDF Document | A public link to the PDF file | The host server must allow the file to be framed |
| Generic iFrame | Any web page URL | Works only if that site allows embedding |
Most embed code is an iframe with a few attributes. Knowing what each does helps you adjust the output. These definitions follow MDN Web Docs.
width and height: the frame size in CSS pixels. Without them, browsers use 300 by 150. CSS on your page can override these values.allowfullscreen or allow="fullscreen": lets the embedded content go fullscreen. MDN treats allowfullscreen as the legacy form and allow="fullscreen" as the current one.title: a short label that tells screen reader users what the frame contains, such as "Product demo video". We suggest adding one to every embed if the output lacks it.loading="lazy": delays loading until the frame is near the visible part of the page, which helps pages with several embeds.sandbox: restricts what the framed page can do. Use it for untrusted pages, and lift restrictions one by one only as needed.A fixed width iframe, such as 560 pixels, overflows on a phone screen. The responsive option solves this with a wrapper that keeps the 16:9 shape at any width. The math is simple: 9 divided by 16 is 0.5625, so the wrapper's height is set to 56.25% of its width.
Example: this is an illustration of the pattern, and the exact code the tool returns may differ slightly. A responsive YouTube embed follows this pattern, shown here with the wrapper CSS as a class:
<div class="embed-wrap">
<iframe src="https://www.youtube.com/embed/VIDEO_ID"
title="Product demo video"
allow="fullscreen" loading="lazy"></iframe>
</div>
.embed-wrap { position: relative; padding-bottom: 56.25%;
height: 0; overflow: hidden; }
.embed-wrap iframe { position: absolute; top: 0; left: 0;
width: 100%; height: 100%; }On a 360 pixel wide phone, the wrapper is 202.5 pixels tall (360 times 0.5625). On an 800 pixel column it is 450 pixels tall. The video keeps its shape in both cases. Use the wrapper for video and maps. Skip it for audio players and social posts, which have their own natural heights.
If the preview or your live page shows an empty frame or a "refused to connect" message, the most common causes are these:
The tool builds the code from the options you choose. It cannot check whether the remote site allows embedding, so always confirm the embed on your live page.
Use 100% width with the responsive 16:9 wrapper for videos and maps so they fit phone screens.
Add a short title attribute to the iframe so screen reader users know what it contains.
Add loading="lazy" when a page has several embeds, so they load as visitors scroll.
Paste the code into an HTML or custom code block, not the visual text editor.
If a Generic iFrame stays blank, the site likely blocks framing. Link to it instead.
Test the embed on your live page and on a phone before you publish.
Writing embed HTML from scratch requires knowing the correct API endpoint for each platform, the right URL format, proper attribute names, and responsive CSS techniques. Each platform is different, and a single mistake produces a broken embed. This generator handles all platform-specific logic automatically.
Most platforms bury their embed option in share menus. YouTube's embed settings, Spotify's share dialog, and Google Maps' share flow all differ and can be hard to find. This tool lets you generate the correct code from any URL without navigating each platform's interface.
Builder-native embed blocks are limited to specific platforms and rarely offer responsive controls or fullscreen toggles. This generator gives you raw HTML you can customize and use in any environment.
An embed code generator turns a link into HTML you can paste into a web page. This one supports YouTube, Google Maps, Twitter / X, Instagram, Spotify, SoundCloud, PDFs and generic pages. You set the size and options, preview the result and copy the code, all in your browser for free.
Tick Make Responsive (16:9 aspect ratio wrapper) before you generate. The tool wraps the iframe in a container whose height is 56.25% of its width, so the embed keeps a 16:9 shape on any screen. Use it for videos and maps, and keep fixed heights for audio players.
The site you are embedding probably blocks framing with an X-Frame-Options or Content-Security-Policy header. No embed code can get around that. Other causes are private content, a link to a profile instead of a single item, or a site editor that strips iframe code from text blocks.
Paste it into an HTML, custom code or embed block in your website builder or CMS. If you paste it into a normal text block, the editor may show the code as plain text or remove it. After saving, open the live page on desktop and mobile to confirm it displays.
Yes. The embedded code generator is free and needs no account. It runs in your browser and builds the HTML from the options you pick, so there is nothing to install. You can generate as many embed codes as you need for videos, maps, audio, PDFs or web pages.
Embedded content belongs to the site that hosts it, so it does not add text to your page in the way your own writing does. Embeds can still make a page more useful, for example a map on a contact page. Add a short description around each embed so readers and search engines know why it is there.