YouTube Embed Code Generator

How to Use This YouTube Embed Code Generator

Getting your embed code takes under 30 seconds.

Step 1 — Paste Your YouTube Video URL

Copy from the browser address bar or Share → Copy Link. Accepts: youtube.com/watch?v=, youtu.be/, youtube.com/playlist?list=, youtube.com/shorts/. Does NOT work with private videos or videos with embedding disabled.

Step 2 — Customize the Player Options

• Autoplay — starts video automatically (must be muted)
• Mute — required for autoplay to function
• Loop — replays endlessly when finished
• Controls — show or hide player controls
• Start/End time — set exact seconds
• Responsive — scales to any screen width
• Privacy-enhanced mode — uses youtube-nocookie.com (GDPR)

Step 3 — Copy and Paste

Click “Copy Code” and paste into your website's HTML editor — WordPress Custom HTML block, Squarespace Code Block, Wix HTML Element, or raw HTML file. Never paste into a visual editor's text area.

YouTube Embed Code Parameters Explained

YouTube's iFrame embed accepts over 20 parameters. Here are the ones that actually matter — with current, accurate behavior.

autoplay — Does It Actually Work?

Autoplay with sound is blocked by all major browsers unless the user has previously interacted with the site. The only reliable way: autoplay=1&mute=1 — muted autoplay works across all browsers.

<iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1"
  allow="autoplay; encrypted-media" allowfullscreen>
</iframe>

rel=0 — What It Actually Does Now

Before 2018: rel=0 prevented ANY related videos at the end. Since September 2018: rel=0 shows related videos from the same channel only — not from other channels. There is no parameter that completely removes the related videos endscreen. Any guide saying otherwise is outdated.

loop, controls, mute, modestbranding

loop=1: Requires adding playlist=VIDEO_ID with the same ID — without this, loop does nothing on single videos.

?loop=1&playlist=VIDEO_ID

controls=0: Hides player controls. mute=1: Starts muted, required for autoplay. modestbranding=1: Reduces YouTube branding (effect limited since 2023, may be deprecated).

start & end — Custom Time Range

<!-- Embed from 1:30 to 3:00 -->
<iframe src="https://www.youtube.com/embed/VIDEO_ID?start=90&end=180"
  allowfullscreen>
</iframe>

Privacy-Enhanced Mode (GDPR Compliance)

Using youtube-nocookie.com prevents YouTube from tracking viewers with cookies until they click play — important for GDPR compliance.

<!-- Privacy-enhanced: no cookies until play -->
<iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID">
</iframe>

Complete Parameter Reference

How to Make Your YouTube Embed Responsive

YouTube's default embed outputs fixed 560×315 pixels. On mobile, this overflows or appears tiny. Two methods to fix it:

Method 1 — CSS Wrapper (Works Everywhere)

CSS:

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}
.video-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

HTML:

<div class="video-wrapper">
  <iframe src="https://www.youtube.com/embed/VIDEO_ID"
    frameborder="0" allowfullscreen>
  </iframe>
</div>

Method 2 — Modern CSS aspect-ratio

iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

Cleaner, no wrapper needed. Not supported in IE11 — fine for all modern browsers in 2026.

How to Embed YouTube Playlists and Shorts

Embedding a YouTube Playlist

<iframe src="https://www.youtube.com/embed/videoseries?list=PLAYLIST_ID"
  allowfullscreen>
</iframe>

Find your Playlist ID in the URL after list=. The embed starts at the first video with a playlist navigation panel.

Embedding YouTube Shorts — Vertical 9:16

Shorts are 9:16 vertical. Standard 16:9 wrappers show heavy black bars. Use a vertical wrapper instead:

.shorts-wrapper {
  position: relative;
  padding-bottom: 177.78%; /* 9:16 ratio */
  height: 0;
  overflow: hidden;
  max-width: 315px;
}
.shorts-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

<div class="shorts-wrapper">
  <iframe src="https://www.youtube.com/embed/SHORTS_VIDEO_ID"
    allowfullscreen>
  </iframe>
</div>

Use max-width: 315px to prevent Shorts from stretching too wide on desktop.

How to Embed YouTube Videos on Different Platforms

Does Embedding YouTube Videos Help SEO?

Yes — with one significant caveat most guides ignore.

Time on Page and Engagement

Visitors watching embedded videos spend more time on your page — a positive engagement signal. For YouTube creators, embedding your own videos on your website also increases view count and watch time within YouTube.

Core Web Vitals — The Hidden Cost

A single YouTube iFrame loads 11–19 additional HTTP requests, adding 500KB–1MB to page weight before anyone plays anything. If above the fold, it becomes the LCP element — slowing your score significantly.

Solution — Facade / Lazy Loading: Render a static thumbnail instead of the full iFrame. Load the iFrame only when the visitor clicks play. See lite-youtube-embed for the best implementation.

Lazy Loading with loading="lazy"

<iframe src="https://www.youtube.com/embed/VIDEO_ID"
  loading="lazy" allowfullscreen>
</iframe>

Defers iFrame until near viewport. Simpler than facade pattern but less effective — still loads full iFrame on scroll.

YouTube Embed Code Troubleshooting

Frequently Asked Questions