Embedding YouTube videos lets you serve adaptive streaming video without paying for heavy video bandwidth on your own server. You embed a YouTube player by placing an iframe pointing to the video's /embed/VIDEO_ID URL inside your page.
Instead of pasting a fixed width="560" height="315" iframe that overflows on phones, pair CSS aspect-ratio: 16 / 9; with width: 100%;. Use https://www.youtube-nocookie.com/embed/... to avoid setting tracking cookies until the visitor actually clicks play.
Always add a descriptive title attribute for screen readers and loading="lazy" so off-screen video players do not slow down your initial page load.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML YouTube Embed Demo</title>
<style>
.video-container { max-width: 680px; margin: 20px auto; }
.video-container iframe {
width: 100%;
aspect-ratio: 16 / 9;
border: 0;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="video-container">
<iframe
src="https://www.youtube-nocookie.com/embed/M7lc1UVf-VE?rel=0"
title="YouTube developer API overview video"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
loading="lazy"
></iframe>
</div>
</body>
</html>
Append query flags to the embed URL to tune playback: ?rel=0 limits end-screen suggestions to the same channel, ?start=30 begins at the 30-second mark, and ?autoplay=1&mute=1 starts muted playback automatically.
youtube.com/watch?v=... URL into src: Watch URLs refuse to load inside iframes; always use /embed/VIDEO_ID.loading="lazy" or a click-to-load poster facade.YouTube blocks youtube.com/watch with X-Frame-Options headers; only /embed/VIDEO_ID URLs allow iframe embedding.
No. Browsers block unmuted autoplay on embedded videos, so autoplay only works when paired with mute=1.
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.