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;
}