YouTube Embed Code Generator
Turn any YouTube link into a responsive embed, on the nocookie host, lazily loaded, with a real frame title and an aspect ratio instead of a fixed height.
<div class="video-embed">
<iframe
src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ"
title="YouTube video"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
loading="lazy"
></iframe>
</div>
<style>
.video-embed {
aspect-ratio: 16 / 9;
}
.video-embed iframe {
width: 100%;
height: 100%;
}
</style>Output is valid and updates as you type.
Fix the highlighted fields to update the output.
Paste a YouTube link, get an embed that is responsive, lazily loaded, labelled for screen readers and served from the nocookie host.
How to use
- Paste any YouTube URL: a watch link, a
youtu.belink, a short, a live URL, or a bare 11 character id. - Give the frame a title. It is what a screen reader announces, and an iframe without one is read out as “frame”.
- Keep the responsive wrapper. It sets an aspect ratio rather than a fixed height, so the player fits whatever column it lands in.
- Set a start time if you are linking to a moment: seconds,
1m30sor1:30all work. - Copy the HTML. The styles are a two rule block you can move into your stylesheet.
Example
<div class="video-embed">
<iframe
src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ"
title="YouTube video"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
loading="lazy"
></iframe>
</div>
<style>
.video-embed {
aspect-ratio: 16 / 9;
}
.video-embed iframe {
width: 100%;
height: 100%;
}
</style>No width and height attributes, no padding hack, and no height to keep in step with the width.
Pitfalls
- An iframe with no
titleis announced as an unlabelled frame. It is the single most common accessibility failure in embedded video. - Autoplay with sound is blocked by every browser. Turning autoplay on here mutes the video, because that is the only version that plays.
- A single video cannot loop on its own:
loop=1needsplaylist=<id>as well, which the generated code includes. rel=0stopped hiding related videos in 2018. It now limits them to the same channel, which is as far as YouTube lets you go.- The nocookie host is not the same as no tracking. It sets no cookie until playback starts; once someone presses play, YouTube is YouTube.
loading="lazy"on an iframe is supported everywhere now, and it keeps a below-the-fold player off the critical path. Do not use it for a player that is the first thing on the page.- Embedding the player at all costs about half a megabyte before anyone presses play. A click-to-load facade is the fastest option if performance matters more than convenience.
- A shorts URL is a normal video with a vertical ratio. Set the ratio to 9 / 16 or it will letterbox.
Compatibility
aspect-ratio needs Chrome 88, Safari 15 or Firefox 89; for anything older, the padding-top percentage trick still works. loading="lazy" on iframes is supported in Chrome 77, Firefox 121 and Safari 16.4, and is ignored harmlessly elsewhere. The allow list and referrerpolicy are what YouTube’s own embed code carries. The tool runs entirely in your browser.
Frequently asked questions
Should I use youtube-nocookie.com?
Yes, unless something depends on the main host. It defers the tracking cookie until playback, which is usually enough for a cookie banner.
How do I make the video start at a specific time?
Put the time in the start field. The generated URL carries
start=<seconds>.Why is my autoplay not working?
Browsers require muted autoplay. This tool mutes the video when you turn autoplay on, which is the only combination that plays.
Can I hide the YouTube branding?
Not any more.
modestbranding was removed, and the logo in the controls is part of the player.What about privacy law?
An embed loads a third party player. Whether that needs consent depends on your jurisdiction and your banner; the nocookie host reduces what is set before playback but does not remove the third party.