How to Embed a YouTube Video on Your Website (With Working Code)

Why "Just Link to the Video" Isn't Enough

Linking out to YouTube works, but it sends people away from your page. If you're writing a blog post, a course page, or a product page and you want visitors to actually watch the video without leaving, you need to embed it - which means dropping YouTube's own player directly into your HTML.

The good news: YouTube's embed format hasn't changed in years and is genuinely simple. The bad news: it's easy to copy it wrong, forget a required attribute, or grab the full watch-page URL instead of the embed URL, and end up with a broken or unstyled player.

The Standard YouTube Embed Code

Every public YouTube video can be embedded with a single iframe:

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

The only thing you actually need to change is VIDEO_ID - the 11-character ID from the video's URL (the part after watch?v=, or the whole path segment after youtu.be/).

The Fastest Way to Get This Code

Rather than hand-typing the video ID into that template every time, you can grab the exact snippet in one click: paste the video's link into getthumbnailfromyt.com, extract it like you normally would, then click "Copy Embed Code" on the results. It copies the full iframe snippet above with the correct video ID already filled in - ready to paste directly into your HTML, CMS embed block, or Markdown file.

If you want to see how it'll look before committing to the code, click "Preview Video" first - it loads the same embed inline on the page so you can confirm it's the right video.

Common Mistakes That Break Embeds

• Using the watch URL instead of the embed URL. youtube.com/watch?v=VIDEO_ID is what you copy from your browser; youtube.com/embed/VIDEO_ID is what actually goes in the src. Pasting the watch URL into an iframe just shows a blank frame.
• Forgetting allowfullscreen. Without it, viewers can't expand the video to fullscreen - a small omission that generates a surprising number of "the video is broken" complaints.
• Hardcoding a fixed width and height. The 560x315 in the template above is a fine default, but on a real responsive site it'll overflow on mobile unless you wrap it. A simple, reliable pattern is a wrapper div with position: relative; padding-bottom: 56.25% (the 16:9 ratio) and the iframe set to position: absolute; width: 100%; height: 100% inside it.
• Missing title. It's not just decorative - screen readers use it to describe the embedded content, and skipping it is a small but real accessibility miss.
• Stripping referrerpolicy and allow. Some CMS platforms sanitize iframe attributes on paste. If autoplay, picture-in-picture, or fullscreen stop working after embedding, check whether your CMS quietly removed these.

Do You Need the Thumbnail Too?

If you're embedding the video and want a custom thumbnail for social sharing (Open Graph/Twitter Card previews, or a static preview image before the player loads), you'll want the actual thumbnail file, not just the embed. That's a separate image - grab it from the same results page where you copied the embed code, since both live in the same tool.

The Bottom Line

Embedding a YouTube video is a one-line iframe, but the exact URL format and a couple of attributes are easy to get wrong by hand. Grabbing the ready-made snippet instead of retyping the template each time removes most of the ways this normally breaks.