HTML YouTube embeds allow you to embed videos hosted on YouTube into your website using an <iframe> container. This saves server bandwidth while leveraging YouTube's video streaming infrastructure.
YouTube videos are embedded using an <iframe> tag pointing to YouTube's special /embed/ URL endpoint:
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID?autoplay=0&rel=0"
title="YouTube Video Player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
Key YouTube URL parameters (?param=value):
autoplay=1: Automatically starts playing video upon iframe load (requires mute=1).mute=1: Silences video audio.rel=0: Restricts related videos shown at the end to videos from the same YouTube channel.controls=0: Hides YouTube player controls.loop=1&playlist=VIDEO_ID: Loops video continuously.flowchart LR
A["Iframe src='youtube.com/embed/ID'"] --> B["YouTube Embedded Video Player"]
B --> C["Streams Video Asset via YouTube CDN"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML YouTube Embed Example</title>
</head>
<body style="font-family: system-ui, sans-serif; background-color: #0f172a; color: #f8fafc; padding: 2rem;">
<h2>Featured Video Lesson</h2>
<div style="background-color: #1e293b; padding: 1rem; border-radius: 12px; max-width: 700px;">
<iframe
src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0"
title="Web Development Video Lesson"
width="100%"
height="380"
style="border: none; border-radius: 8px;"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
loading="lazy">
</iframe>
</div>
</body>
</html>
/embed/ URL format: Never use a standard YouTube watch URL (youtube.com/watch?v=...) inside iframe src; always use youtube.com/embed/VIDEO_ID.rel=0 to URL parameters: Prevents competitors' videos from appearing in related video recommendations when your video finishes.loading="lazy" on YouTube iframes: Prevents heavy YouTube iframe scripts from slowing down initial page rendering.Create a responsive YouTube <iframe> embed with rel=0, explicit title, and allowfullscreen enabled!
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.