Responsive iframes

by Ali Khaled

HTML

<div class="container">
    <!--<img src="http://lorempixel.com/output/abstract-q-c-1200-675-1.jpg" alt=""/>-->
    <div class="iframe-wrapper">
        <iframe src="//liveauctions360.com/auction-lots.html#mode-list" width="1200" height="675" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
</div>

CSS

html, body {
    height: 100%;
    margin: 0;
}
.container {
    height: 100%;
    text-align: center;
    padding: 1em;
    box-sizing: border-box;
}
img {
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
}
.iframe-wrapper {
    position: relative;
    height: 0;
    padding-top: 56.25%;
    overflow: hidden;
}

.iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}