HTML YouTube Videos

HTML YouTube Videos

You can embed HTML YouTube Videos directly into your web page using the <iframe> tag. This allows visitors to watch videos without leaving your site.

Basic Syntax

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

src="https://www.youtube.com/embed/VIDEO_ID"

title="YouTube video"

frameborder="0"

allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"

allowfullscreen>

</iframe>

Replace VIDEO_ID with the unique ID of the YouTube video.
width and height → Video size on your page.
allowfullscreen → Allows full-screen mode.
allow → Permissions for autoplay, clipboard, and other features.

Example HTM YouTube Videos

<!DOCTYPE html>
<html>
<head>
<title>Embed YouTube Video</title>
</head>
<body>

<h2>Watch This Video</h2>

<iframe width="560" height="315"
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>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Embed YouTube Video</title>

</head>

<body>

<h2>Watch This Video</h2>

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>

</body>

</html>

Responsive YouTube Video

To make the embedded video responsive on all devices:

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
frameborder="0" allowfullscreen>
</iframe>
</div>

style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"

frameborder="0" allowfullscreen>

</iframe>

</div>

padding-bottom: 56.25% → Maintains 16:9 aspect ratio.
width: 100%; height: 100% → Makes video scale with screen size.

Key Points

<iframe> is the standard way to embed YouTube videos.
Always use responsive containers for mobile-friendly pages.
You can control autoplay, controls, loop, and start time using YouTube URL parameters:
- ?autoplay=1 → Auto-start video
- ?start=30 → Start at 30 seconds
- ?controls=0 → Hide controls

HTML YouTube Videos