How to Embed a YouTube Video on Your Website

Adding a YouTube video to your site is one of the easiest ways to make a page more engaging, and you don’t need any special software to do it. This guide walks you through getting the embed code, pasting it in the right place, making the video responsive, and tuning a few handy options.

What “embedding” a YouTube video actually means

When you embed a video, you are not downloading the file or copying it onto your own server. Instead, you drop a small piece of HTML, called an <iframe>, onto your page. That iframe is essentially a little window that streams the video directly from YouTube’s servers.

This matters for two reasons:

• It stays within YouTube’s Terms of Service. Because the video is still being served by YouTube (with its branding, ads, and analytics intact), embedding is fully supported and encouraged. Re-hosting a downloaded copy would not be.
• It’s lightweight and reliable. YouTube handles the bandwidth, the adaptive quality, and playback across devices. Your page just points to the video.

The only thing you place on your site is the embed code.

Getting the embed code

There are two easy ways to get the code you need.

Option 1: YouTube’s built-in Share button

1. Open the video on YouTube.
2. Click Share below the video.
3. Choose Embed.
4. Copy the <iframe> code that appears.

This is the quickest route and works fine for a basic embed. You also get a few checkboxes here, such as “Start at” a specific time.

Option 2: Our generator, for more control

If you want a cleaner setup with options that YouTube buries or leaves out, use our free YouTube Embed Code Generator. You paste in a video URL and toggle exactly what you need, such as a start timestamp, privacy-enhanced mode, and a ready-made responsive wrapper, then copy the finished code. It’s a faster way to get a polished embed without hand-editing the HTML.

Where to paste the embed code

Once you have the code, you need to put it somewhere that accepts raw HTML.

On a plain HTML page, paste the iframe directly into your markup wherever you want the video to appear, for example inside an article or a <div>.

On a website builder or CMS, look for a dedicated HTML or embed block:

Platform	Where to paste
WordPress (block editor)	Add a Custom HTML block and paste the code
WordPress (classic editor)	Switch to the Text/HTML tab, then paste
Squarespace	Add an Embed or Code block
Wix	Add Embed → Embed HTML (Custom Code)
Webflow	Drop in an Embed element

A quick note: many platforms also let you simply paste the plain YouTube URL on its own line and they will auto-embed it for you. That’s convenient, but you lose control over options like sizing and privacy mode, so pasting the iframe yourself is often the better choice.

A basic example iframe

Here is what a standard YouTube embed looks like. Replace VIDEO_ID with the ID of your video (the string after watch?v= in the URL).

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube video player"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  allowfullscreen>
</iframe>

What each part does:

• src points to the embed URL for your specific video. This is the most important attribute.
• title gives the iframe an accessible label, which screen readers announce and which is good for accessibility and SEO. Write something descriptive.
• allow lists the browser features the player is permitted to use, such as fullscreen, autoplay, and picture-in-picture.
• allowfullscreen lets viewers expand the video to fill their screen.
• width and height set a fixed size. These work, but they don’t adapt to smaller screens, which is what we’ll fix next.

Making the video responsive

A fixed width and height can overflow on phones or leave awkward gaps on wide screens. The classic fix is a wrapper that locks the video to a 16:9 ratio so it scales smoothly to any width.

<div style="position: relative; width: 100%; padding-bottom: 56.25%; height: 0;">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="YouTube video player"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
  </iframe>
</div>

The trick is the padding-bottom: 56.25%, which is the height-to-width ratio of 16:9 (9 ÷ 16 = 0.5625). The iframe is then stretched to fill that box. The video now resizes with its container while keeping perfect proportions.

If you use modern CSS, you can achieve the same result more simply by giving the iframe width: 100% and aspect-ratio: 16 / 9, which is well supported in current browsers.

Useful options

You control most player behavior by adding parameters to the src URL. The first parameter starts with ? and additional ones are joined with &. Here are the most useful:

Option	Add to the URL	What it does
Start time	?start=90	Begins playback at 90 seconds in
Autoplay	?autoplay=1&mute=1	Plays automatically on load
Loop	?loop=1&playlist=VIDEO_ID	Repeats the video continuously
Hide controls	?controls=0	Removes the player control bar

A few things worth knowing:

• Autoplay requires muted. Browsers block videos that try to autoplay with sound, so you must pair autoplay=1 with mute=1 for it to work reliably.
• Looping needs the playlist trick. YouTube only loops when you also pass playlist= set to the same video ID. It looks redundant, but it’s required.
• Combine parameters carefully. For example: https://www.youtube.com/embed/VIDEO_ID?start=30&mute=1.

Privacy-enhanced mode

If you want to reduce the cookies and tracking that load before someone presses play, swap the domain in the src from youtube.com to youtube-nocookie.com:

<iframe
  src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
  title="YouTube video player"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  allowfullscreen>
</iframe>

This is often called “Privacy-Enhanced Mode.” It doesn’t make the embed completely cookie-free, but it delays YouTube’s tracking cookies until the viewer actually interacts with the video, which is helpful for privacy notices and cookie-consent rules.

Performance tip: lazy-load the iframe

Embeds can be heavy, so don’t make the browser load the player before it’s needed. Add loading="lazy" to the iframe and the video will only load as it scrolls into view:

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube video player"
  loading="lazy"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  allowfullscreen>
</iframe>

This is a small change that can noticeably speed up pages with videos lower down, especially on mobile.

Quick troubleshooting

The video area is blank or won’t show. Make sure you pasted into an HTML/embed block, not a plain text field that escapes the code. Double-check that the iframe tag is complete and that the src URL is correct.

You see “Video unavailable” or “Playback on other websites has been disabled.” The video’s owner can turn off embedding, in which case it simply cannot be embedded anywhere. Some videos are also region-restricted or set to private. Try the video on YouTube itself to confirm it’s public and embeddable.

Autoplay isn’t working. This is almost always the muted requirement. Add mute=1 alongside autoplay=1. Note that some browsers and data-saver modes still limit autoplay regardless.

The video looks stretched or too small. You’re likely missing the responsive wrapper. Use the 16:9 method above instead of fixed pixel dimensions.

With the embed code in hand and these options at your disposal, you can drop a video onto any page in a minute or two, and if you’d rather skip the manual editing, our free YouTube Embed Code Generator produces the finished, responsive code for you.