YouTube embed code generator

How to generate and place the embed

An embed is one iframe element whose behaviour is configured entirely through the query string on its src. Get the src right and the rest is ordinary HTML.

1. 1Paste the video URL. Only the id is used, so it does not matter which link form you copied.
2. 2Set a start time if you want the player to open partway in, and an end time if you only want a section.
3. 3Turn on the options you need. Autoplay, mute and loop interact with each other, so the tool adjusts the others when you change one.
4. 4Switch on privacy-enhanced mode if the page has a consent banner, then copy the HTML.
5. 5Paste it into your page inside a container that controls the width, rather than leaving the fixed pixel dimensions in place.
6. 6Load the page on a phone as well as a desktop, and check the player is not overflowing its column.

The attributes and parameters that matter

Parameters go on the src URL; attributes go on the iframe element. Mixing the two up produces markup that looks right and quietly does nothing.

• The player URL is youtube.com/embed/VIDEO_ID, and the privacy form is youtube-nocookie.com/embed/VIDEO_ID. Everything else hangs off that as a query string.
• start and end take whole seconds, counted from the beginning of the video.
• autoplay=1, mute=1 and controls=0 are each on or off, expressed as 1 or 0.
• loop=1 needs playlist set to the same video id beside it, which is why the generated code carries the id twice.
• allowfullscreen on the iframe is what gives the viewer the fullscreen button; without it the control is missing.
• A title attribute on the iframe is what a screen reader announces. An untitled frame is a straightforward accessibility failure and a common audit finding.
• loading="lazy" defers the player until it is near the viewport, which is usually the single biggest win available on a page with an embed below the fold.

What goes wrong

Embed snippets get copied between projects for years, so most broken embeds are carrying parameters that stopped doing anything long ago.

• showinfo=0 has done nothing since 2018. It is still pasted around constantly because it used to hide the title bar.
• modestbranding is no longer honoured either, so a snippet promising a logo-free player is out of date.
• Leaving width="560" height="315" in place. Those numbers are from the copy-paste snippet and they overflow a narrow column; a 16:9 wrapper with a percentage width is the fix.
• Autoplaying with sound and wondering why nothing starts. The browser is refusing, silently, and there is no error to find.
• Putting an embed above the fold on a page whose performance matters. The player pulls a lot of script before anyone has decided to watch.

When an iframe is the wrong shape

An embed is a whole third-party application dropped into your page. That is a fair trade for a page whose point is the video, and a poor one everywhere else.

• On a page with several videos, embed a facade instead: show the thumbnail, and swap in the iframe on click. The thumbnail downloader gives you the image URL to do it with.
• If the video is incidental to the page, a link with a timestamp is lighter and often more useful than a player nobody presses.
• If you need the video to be part of a product experience rather than a page, the IFrame Player API gives you playback control that query parameters cannot.
• If you are self-hosting for control over branding or data, none of this applies and a native video element is the starting point.