OneTaskBy Tim King · Updated
Video Embed Code Generator
Responsive Embed Code With Privacy Mode and Muted Autoplay From YouTube or Vimeo Links
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Video Embed Code Generator works
This video embed code generator turns a YouTube link, a Vimeo link or the address of a video file into embed code that fills the width of its column and keeps the right shape on any screen. Pick the shape, privacy mode and autoplay, then copy the code into your page.
The embed code YouTube and Vimeo hand out has a fixed width and height, such as 560 × 315. On a
phone it overflows the screen; in a wide column it sits small with empty space beside it. The old fix
was a wrapper div with 56.25% padding. Every current browser now supports the CSS aspect-ratio
property, so one element with width:100% and an aspect ratio does the job.
What the video embed code generator outputs
| Link you paste | Code you get | Notes |
|---|---|---|
| YouTube watch, youtu.be, Shorts or live link | iframe to the embed player |
Privacy mode uses youtube-nocookie.com |
| Vimeo video link | iframe to player.vimeo.com |
Privacy mode adds dnt=1 |
| Direct .mp4, .webm, .mov or .ogv URL | Native video element |
Controls, or a silent autoplay |
Every embed is lazy-loaded where the browser supports it, so a video further down the page does not
slow the first paint. Iframes get a title, which screen readers announce, and the permissions the
players need for full screen and picture-in-picture.
Privacy-enhanced mode
Standard YouTube embeds set tracking cookies as soon as the page loads, even if nobody presses play.
The youtube-nocookie.com domain waits until the viewer plays the video. Vimeo's dnt=1 stops the
player from tracking the session. Neither replaces a consent banner where the law needs one, but both
reduce what is stored before the visitor acts.
Picking a shape
16:9 suits nearly all YouTube and Vimeo uploads. Use 9:16 for Shorts and vertical clips, 1:1 for square social video, 4:3 for older footage and 21:9 for cinematic trailers. If the shape is wrong, the player shows black bars inside the frame rather than stretching the picture.
Tips and pitfalls
Autoplay must be muted. Browsers block autoplay with sound, so the code adds mute along with autoplay. Use it for background or demo clips, not for talks people need to hear.
Start time. To start partway through, make an embed URL with the timestamp link maker and use it
in place of the src here.
Self-hosted files. A video file link needs the server to allow range requests, which almost all web hosts and CDNs do, or seeking will not work.
How to read the result
The result is a single element ready to paste into HTML, a CMS code block or a Markdown file that allows HTML. The URL is escaped for an attribute, so ampersands are safe as they are.
FAQ
How do I make a YouTube embed responsive?
Set the iframe's width to 100%, height to auto and add aspect-ratio: 16 / 9. The iframe then fills
its container and keeps its shape at every screen size. The code from this tool does all three with
an inline style.
What is youtube-nocookie.com?
It is YouTube's privacy-enhanced embed domain. It plays the same video but does not store tracking cookies on the viewer's device until they press play. The video, player and adverts are otherwise identical.
Why won't my embedded video autoplay?
Browsers only allow autoplay when the video is muted, and some also need the page to have been interacted with. Choose Yes, muted, which adds both the autoplay and mute settings each player needs.
Can I embed a video file without YouTube?
Yes. Paste the full URL of an .mp4 or .webm file and you get a native video element. For the best loading behaviour, with a poster and fallback formats, use the video for web snippet tool instead.
See also: all Video & Screen tools, Images, Audio, PDF, SVG, Simulations & Screensavers, Generative Art, Chart Makers, 3D Model Viewers, Drawing Pads, Mockups & 3D Making, Diagram Makers, 3D Science, Tracker Music.
Related tools
Responsive Iframe Generator
Responsive iframe embed code for YouTube, Vimeo, maps and more.
YouTube Timestamp Link Maker
Make a YouTube link that starts at a chosen time.
Video For Web Snippet
Write the HTML5 video tag for a self-hosted clip, done properly.
Audio Embed Code Generator
Build an HTML5 audio tag with the right MIME types and options.
HTML Entity Encoder
Escape and unescape HTML entities in any text.