Ask any question about HTML here... and get an instant response.

How do I embed a responsive YouTube video using HTML only?

Asked on Sep 13, 2025

Answer

To embed a responsive YouTube video using HTML, you can use a combination of the <iframe> element and a wrapper <div> with CSS for responsiveness. This method ensures that the video scales with the size of its container.

<!-- BEGIN COPY / PASTE -->
    <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto;">
      <iframe src="https://www.youtube.com/embed/VIDEO_ID" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0" allowfullscreen></iframe>
    </div>
    <!-- END COPY / PASTE -->

Additional Comment:

Replace VIDEO_ID with the actual ID of the YouTube video you want to embed.
The padding-bottom: 56.25% is used to maintain a 16:9 aspect ratio, which is standard for YouTube videos.
The position: absolute and width: 100% styles ensure the <iframe> fills the wrapper <div> completely.

✅ Answered with HTML best practices.

Ask any question about HTML here... and get an instant response.

How do I embed a responsive YouTube video using HTML only?

Asked on Sep 13, 2025

Answer

Additional Comment:

The Q&A Network