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_IDwith 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: absoluteandwidth: 100%styles ensure the<iframe>fills the wrapper<div>completely.
✅ Answered with HTML best practices.
Recommended Links: