Responsive iframe

Make an iframe fully responsive

by Ali Khaled

HTML

<div class="responsive-video">
<div class="cta"></div>
<iframe width="420" height="315" src="https://www.liveauctioneers.com/auctioneer/5224/federal-government-liquidation/#tabLinks" frameborder="0" allowfullscreen></iframe>

</div>

<style>


.responsive-video {
    position: relative;
    padding-bottom: 56.25%; /*Set based on the videos aspect ratio. If the aspect ratio is 16:9 set 
    the padding bottom to 56.25%. If the video aspect ration is 4:3, set padding-bottom to 75% */
    padding-top: 35px; /*Height of the youtube video header*/
    height: 0; /* Not needed as the iframe derives the height from the padding bottom */
    overflow: hidden; /*hides if any of the video escapes outside the container*/
}
.cta  {
    position: absolute;
    width: 30px;
    height: auto;
    right: 0;
    bottom: 0;
}

.responsive-video iframe {
    width: 100%; /*make sure video takes up 100% of the width*/
    height: 100%;/*make sure video takes up 100% of the height*/
    position: absolute; /*required because container has a height of 0*/
    left: 0; /* correct the positioning */
    top: 0; /* correct the positioning */
}

</style>

CSS

.responsive-video {
    position: relative;
    padding-bottom: 56.25%; /*Set based on the videos aspect ratio. If the aspect ratio is 16:9 set 
    the padding bottom to 56.25%. If the video aspect ration is 4:3, set padding-bottom to 75% */
    padding-top: 35px; /*Height of the youtube video header*/
    height: 0; /* Not needed as the iframe derives the height from the padding bottom */
    overflow: hidden; /*hides if any of the video escapes outside the container*/
}
.cta  {
    position: absolute;
    width: 30px;
    height: auto;
    right: 0;
    bottom: 0;
}

.responsive-video iframe {
    width: 100%; /*make sure video takes up 100% of the width*/
    height: 100%;/*make sure video takes up 100% of the height*/
    position: absolute; /*required because container has a height of 0*/
    left: 0; /* correct the positioning */
    top: 0; /* correct the positioning */
}