HTML YouTube
YouTube videos embed into a page with a single <iframe>. YouTube provides the player; you provide the page.
The embed tag
<iframe width="640" height="360"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="YouTube video"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
URL parameters
Append query parameters to the embed URL to customise playback:
| Parameter | Effect |
|---|---|
autoplay=1 | Start playing automatically (must be combined with mute=1). |
mute=1 | Start muted. |
loop=1&playlist=ID | Loop. playlist is required and must match the video ID. |
start=30 | Start playback at 30 seconds. |
controls=0 | Hide the player controls. |
rel=0 | Only suggest related videos from the same channel. |
Tip: Wrap the iframe in a 16:9 aspect-ratio container so it scales nicely on mobile.
aspect-ratio: 16 / 9 in CSS does this in one line.Example
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML YouTube</title>
</head>
<body>
<h1>HTML YouTube</h1>
<p>This is a demo page for the "HTML YouTube" lesson.</p>
</body>
</html>
Try it Yourself »
Exercise
Complete the embed URL pattern used by YouTube iframes.
<iframe src="https://www.youtube.com/
/VIDEO_ID"></iframe>
Five letters; appears between youtube.com and the video ID.
Discussion
Loading…