How To Add A Youtube Video To Html

Learn how to add a YouTube video to HTML with simple iframe code, responsive design, and best practices for accessibility and SEO.

Understanding the Basic iframe Embed

The most common method to embed a YouTube video is by using an iframe element. Day to day, an iframe (inline frame) allows you to embed another HTML document inside the current one, and in this case it loads the YouTube player. The embed URL is provided by YouTube and contains the video identifier Worth keeping that in mind..

Obtaining the Embed Code

1. work through to the YouTube video you want to embed.
2. Click the Share button beneath the video player.
3. Select Embed from the dropdown menu.
4. Copy the entire <iframe> code that appears in the pop‑up box.

The copied code typically looks like this:

Inserting the iframe into HTML

Place the copied iframe tag inside the <body> section of your HTML file, preferably within a container element such as <div> or <section>. For example:

You can remove the explicit width and height attributes if you plan to control sizing with CSS.

Making the Video Responsive

A fixed width and height can cause layout problems on smaller screens. To ensure the video scales nicely, apply a responsive wrapper technique And that's really what it comes down to..

Using CSS Padding Trick

Create a wrapper <div> with a percentage‑based padding that maintains the video’s aspect ratio (16:9). Worth adding: the padding-bottom property is set to 56. Practically speaking, 25% (9/16 × 100%). Then absolutely position the iframe inside the wrapper That's the part that actually makes a difference..

.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100