Inline CSS Code for Responsive iFrame Using YouTube Video

Here is a simple example of how to make an iframe responsive for a YouTube video using inline CSS.

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

Please replace YOUR_VIDEO_ID with the actual ID of your YouTube video. This example assumes a video aspect ratio of 16:9.

The inline CSS code ensures your iframe maintains the aspect ratio while adjusting to the container's width. The percentage value of padding-bottom defines the aspect ratio of the video.

For those that do not wish to use inline CSS, you can always set a class and use external stylesheet. There is still inline CSS in the iframe code below, but you could remove / more it to external stylesheet if so desired.

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