Free tool

Responsive video embed code generator

A responsive video embed code generator turns a video link into an iframe snippet that keeps its aspect ratio at any screen width, so the video fits a phone and a desktop page alike. Paste a YouTube, Vimeo or Vidreno link, pick your options and copy the code. It runs in your browser: no account, and nothing you paste is sent to a server.

Paste a link, copy the code

Explained

How a responsive embed works

A fixed-size iframe is as wide as its width attribute says on every screen. At width="640" it fits a desktop column and overflows a 390-pixel phone, so the visitor scrolls sideways or sees the right third cut off. Scaling the frame down with CSS alone keeps the width right but not the height, and the player ends up letterboxed.

A responsive embed removes the fixed width. The frame takes the width of whatever contains it, and one CSS rule keeps the height in proportion: aspect-ratio: 16 / 9. The generator writes both as an inline style, style="width:100%;aspect-ratio:16/9", so the snippet needs no stylesheet and works in any page builder that accepts HTML.

Before aspect-ratio existed, the same effect needed a wrapper with padding-bottom: 56.25% and an absolutely positioned iframe. Every major browser has supported the property since late 2021 (see MDN in the sources), so the generator uses the shorter rule.

What each option writes

Responsive
style="width:100%;aspect-ratio:16/9" (or the ratio you pick) on the iframe or video element. The frame takes its container’s width and the ratio sets the height.
Fixed size
width and height attributes in pixels. Use it inside a layout that already controls the width, such as a card or a sidebar.
Autoplay
the provider’s autoplay parameter plus its mute parameter, and allow="autoplay" on the iframe. Browsers block autoplay with sound, so muted is the only autoplay that starts.
Loop
loop=1. YouTube only loops a single video when playlist=<id> repeats the video id, so the snippet adds it.
Hide controls
controls=0 where the provider has it (on Vimeo, paid plans only); on a video file, the controls attribute is left out.
Start time
start=<seconds> for YouTube, #t=<seconds>s for Vimeo, #t=<seconds> on a file URL. A time already in the pasted link (t=1m30s, #t=90s) is kept.
Lazy loading
loading="lazy" on the iframe, preload="none" on a video element.
Accessible title
a title attribute, which screen readers announce as the frame’s name.
Privacy-enhanced YouTube
youtube-nocookie.com as the player host (on by default). Vimeo, Vidreno and plain files have no equivalent switch.

Which links it understands

YouTube watch, share (youtu.be), Shorts, live and embed links, including a time in the link. Vimeo video links, player links and unlisted links with their hash. Vidreno video, player and embed links, which go through the same builder as the dashboard’s Embed tab. Direct MP4, WebM, OGG or MOV files, which become a <video> element rather than an iframe. Any other address is wrapped in a plain iframe, and the notes remind you that the site must allow framing.

Everything happens in your browser. The page makes no request with the link, stores nothing and needs no account. The live preview is the only thing that loads from the provider, and it loads nothing until you paste a link.

Worked examples

Three links, three snippets

YouTube, responsive 16:9 with a start time

Link pasted
https://www.youtube.com/watch?v=aqz-KE-bpKQ&t=1m30s
Options
Defaults: responsive 16:9, lazy loading, privacy-enhanced mode.
<iframe
  src="https://www.youtube-nocookie.com/embed/aqz-KE-bpKQ?start=90"
  title="YouTube video player"
  style="width:100%;aspect-ratio:16/9;border:0;display:block"
  loading="lazy"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen
></iframe>

The 1m30s in the link becomes start=90 on the embed URL, the player is served from youtube-nocookie.com, and the inline style keeps the frame 16:9 at any width.

Vimeo, autoplay and loop with the controls hidden

Link pasted
https://vimeo.com/1084537
Options
Autoplay (muted), loop and hide controls on; everything else default.
<iframe
  src="https://player.vimeo.com/video/1084537?autoplay=1&muted=1&loop=1&controls=0"
  title="Vimeo video player"
  style="width:100%;aspect-ratio:16/9;border:0;display:block"
  loading="lazy"
  allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen
></iframe>

Autoplay adds muted=1 next to autoplay=1 because browsers block autoplay with sound; controls=0 only takes effect on a paid Vimeo plan. The allow attribute grants autoplay to the frame.

Vidreno, fixed 640 × 360

Link pasted
https://vidreno.com/video/aaa59afb-8dd6-4238-8d40-68e9ccdbc618
Options
Fixed size 640 × 360, lazy loading off.
<!-- Vidreno Video Embed with rounded corners -->
<style>
  .vidreno-video-container {
    width: 640px;
    height: 360px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    display: block;
    margin-left: auto; margin-right: auto;
  }
  .vidreno-video-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
    position: absolute;
    top: 0;
    left: 0;
  }
</style>
<div class="vidreno-video-container">
  <iframe 
    src="https://vidreno.com/embed/aaa59afb-8dd6-4238-8d40-68e9ccdbc618?radius=10" 
    frameborder="0" 
    title="Vidreno video player" 
    allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen>
  </iframe>
</div>

Vidreno links go through the same builder as the dashboard's Embed tab, so the snippet is the one the dashboard would give you, with the title attribute added.

Reference

Which options each provider supports

Options each provider supports, and what the generator writes for each
Option YouTubeVimeoVidrenoVideo fileWeb page
Responsive size (aspect ratio) Yes, any ratioYes, any ratioYes, 16:9Yes, any ratioYes, any ratio
Fixed size (width × height) YesYesYesYesYes
Autoplay (muted) autoplay=1&mute=1autoplay=1&muted=1autoplay=1&muted=1autoplay mutedNo
Loop loop=1&playlist=<id>loop=1loop=1loopNo
Hide controls controls=0controls=0, paid Vimeo planscontrols=0controls attribute omittedNo
Start time start=<seconds>#t=<seconds>sNo#t=<seconds> on the file URLNo
Lazy loading loading="lazy"loading="lazy"loading="lazy"preload="none"loading="lazy"
Accessible title title attributetitle attributetitle attributetitle attributetitle attribute
Privacy-enhanced mode youtube-nocookie.com (default)NoNoNoNo

"No" means the provider has no switch for it, so the generator leaves the option out and says so in the notes under the code. Vidreno rows describe its own embed builder; YouTube and Vimeo rows restate their published player parameters, linked under sources below.

Sources and assumptions

Every provider rule on this page comes from the provider's own documentation, linked here. The tool is reviewed against these pages; if a provider changes a parameter, the date below tells you how current the page is.

Last reviewed .

From the help centre: Embedding a video on your website · Sharing a video link.

Questions

Embed code questions

What is a responsive video embed code?
A responsive embed is an iframe whose width follows the page and whose height follows its aspect ratio, so the video fills a phone screen and a desktop column without letterboxing or cropping. A fixed-size embed sets width and height in pixels and overflows narrow screens. The generator writes the responsive version by default, using the CSS aspect-ratio property.
Why does autoplay only work when the video is muted?
Browsers block autoplay with sound until the visitor has interacted with the site, so an embed that autoplays unmuted simply does not start. Muted autoplay is allowed. The generator therefore adds the provider's mute parameter whenever autoplay is on, and the allow attribute grants the iframe autoplay permission. Chrome's autoplay policy
What is YouTube's privacy-enhanced mode?
Privacy-enhanced mode serves the player from youtube-nocookie.com instead of youtube.com. YouTube says that in this mode it does not store information about visitors on your website unless they play the video. The generator uses it by default; untick the option to get a standard youtube.com embed with the same parameters. YouTube's embed help page
What does lazy loading do to an embed?
The loading="lazy" attribute tells the browser to defer loading the iframe until it is close to the viewport, so a video far down a page does not slow the first paint. It is on by default. A plain video element has no such attribute, so for a direct file the generator sets preload="none" instead. MDN on iframe loading
How do I embed a Vidreno video with this tool?
Paste the video's share link (vidreno.com/video/…), player link or embed link. The generator hands it to the same embed builder the Vidreno dashboard uses, so the snippet matches the one under your video's Embed tab, with autoplay, loop and controls mapped the same way. The dashboard also offers alignment and corner radius. Embedding a video on your website
Why does the preview stay blank for some links?
A site can refuse to be shown inside another site's iframe with an X-Frame-Options header or a Content-Security-Policy frame-ancestors rule, and the browser then leaves the frame empty. Video players such as YouTube, Vimeo and Vidreno allow framing; many ordinary web pages do not. Nothing in the snippet can override that choice. MDN on X-Frame-Options
Is anything I paste sent to a server?
No. The link is parsed and the code is written in your browser; the page makes no request with it, and no account is needed. The live preview is the only thing that loads from the provider, and it loads nothing until you paste a link. The static examples further down the page are rendered by the same code on the server.

Vimeo, Vimeo On Demand and Vimeo OTT are trademarks of Vimeo.com, Inc. Vidreno is not affiliated with or endorsed by Vimeo.

Need somewhere to host the video itself?

Vidreno hosts your videos for embedding on your own site or app: upload, copy the embed code, done. The Free plan costs nothing and includes 50GB of bandwidth a month; paid plans start at $12/mo with 5TB.

Host your videos free See video hosting