How to Embed YouTube Videos on Your Website (Responsive Guide 2025)

Want to put a YouTube video on your website? It's actually pretty simple. You grab a snippet of code from YouTube, paste it into your page, and you're done. But the default code YouTube gives you has some issues -- it won't look right on phones, it loads slowly, and it's missing some useful options.

Let's fix all of that.

Getting the Basic Embed Code

Go to any YouTube video, click "Share" underneath it, then click "Embed." YouTube will give you an iframe that looks like this:

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  frameborder="0"
  allowfullscreen>
</iframe>

This works, but notice those fixed width and height values? That means the video is stuck at 560px wide no matter what. On a phone, it'll either overflow the screen or look tiny. Let's make it responsive.

Making It Look Good on Every Screen

You want the video to stretch to fit whatever container it's in, while keeping that nice 16:9 shape. There are two ways to do this.

The Modern Way (Use This One)

All modern browsers support the aspect-ratio CSS property, so you can just do this:

<div style="max-width: 800px; margin: 0 auto;">
  <iframe
    style="width: 100%; aspect-ratio: 16/9;"
    src="https://www.youtube.com/embed/VIDEO_ID"
    frameborder="0"
    allowfullscreen>
  </iframe>
</div>

That's it. The video will fill the width of its container and keep its proportions. Clean and simple.

The Old-School Padding Trick

If you somehow need to support ancient browsers, there's a classic workaround using padding-bottom: 56.25% (that's 9 divided by 16). You wrap the iframe in a container and position it absolutely:

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    src="https://www.youtube.com/embed/VIDEO_ID"
    frameborder="0"
    allowfullscreen>
  </iframe>
</div>

Both approaches give you the same result -- a video that looks right on desktop, tablet, and mobile.

Privacy-Enhanced Mode

By default, YouTube drops tracking cookies on your visitors as soon as the page loads -- even before they hit play. If you care about privacy (or need to worry about GDPR), there's an easy fix.

Just swap youtube.com for youtube-nocookie.com in the embed URL:

src="https://www.youtube-nocookie.com/embed/VIDEO_ID"

Now cookies only get set when someone actually clicks play. It's a small change that makes a real difference for your visitors' privacy.

Speed Things Up with Lazy Loading

Each embedded YouTube video loads a bunch of scripts and assets. If you've got multiple videos on one page, that adds up fast and your page will feel sluggish.

The simplest fix is adding loading="lazy" to your iframe:

<iframe
  loading="lazy"
  src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
  style="width: 100%; aspect-ratio: 16/9;"
  allowfullscreen>
</iframe>

This tells the browser to hold off loading the video until the user scrolls near it. If you want to go further, you can show a static thumbnail image and only load the actual player when someone clicks it. That can save 500KB+ per video.

Don't Forget Accessibility

A few small additions make your embeds much better for people using screen readers:

• title attribute: Add something like title="How to bake sourdough bread - YouTube video" so screen readers can announce what the iframe contains.
• allowfullscreen: Always include this so people can expand the video.
• allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture": This controls what browser features the embedded player can use.
• frameborder="0": Removes the ugly default border. You can also use CSS border: none; instead.

Useful Playback Options

You can tweak how the video behaves by adding parameters to the URL. Here are the ones you'll actually use:

• autoplay=1: Starts playing automatically. Heads up -- browsers usually require mute=1 too, or they'll block it.
• mute=1: Mutes the video. Pair this with autoplay.
• start=120: Jumps to a specific time (in seconds). Great for skipping intros.
• end=300: Stops playback at a specific time.
• loop=1: Loops the video. You'll also need playlist=VIDEO_ID for this to work, which is a bit weird but that's how YouTube does it.
• controls=0: Hides the player controls. Use carefully -- it can confuse people.
• rel=0: When the video ends, it'll only show related videos from the same channel instead of random stuff.
• modestbranding=1: Tones down the YouTube branding in the player.

You can mix and match these with &. For example, to start a muted video at 30 seconds with no related videos at the end:

src="https://www.youtube-nocookie.com/embed/VIDEO_ID?start=30&mute=1&rel=0"

Quick Tips for Different Platforms

WordPress

WordPress is nice about this -- just paste a YouTube URL on its own line and it'll automatically turn it into an embedded player. If you want more control over the parameters, use a Custom HTML block and paste the full iframe code.

Wix, Squarespace, and Shopify

These platforms have built-in video components that handle responsiveness for you. Use those when you can. If you need custom parameters, look for an "Embed Code" or "Custom HTML" option.

React, Vue, or Angular

If you're building with a JavaScript framework, consider using a library like react-youtube or vue-youtube. They handle things like cleanup when components unmount, which raw iframes don't do well.

Why Embedding Videos Helps Your Site

Pages with video tend to keep people around longer, which search engines notice. Google sometimes shows video thumbnails in search results too, which can get you more clicks.

To get the most out of it, put the video near the top of your page and write some text content around it. Adding VideoObject structured data helps search engines understand what the video is about.

Mistakes to Watch Out For

• Hardcoded pixel sizes: Always use responsive techniques. Fixed widths break on mobile.
• Too many videos on one page: Each one adds weight. Use lazy loading, or better yet, the thumbnail facade pattern.
• Missing title attribute: It takes two seconds to add and makes a real difference for accessibility.
• Skipping privacy-enhanced mode: Especially if you have European visitors.
• Not testing on phones: Always check how your embeds look on an actual mobile device.

The Final Code You Should Actually Use

Here's everything we've covered rolled into one clean embed code:

<div style="max-width: 800px; margin: 0 auto;">
  <iframe
    title="Your Video Title - YouTube"
    style="width: 100%; aspect-ratio: 16/9; border: none;"
    src="https://www.youtube-nocookie.com/embed/VIDEO_ID?rel=0"
    loading="lazy"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
  </iframe>
</div>

It's responsive, respects privacy, loads lazily, and includes all the right accessibility bits. Copy it, swap in your video ID, and you're good to go.