Vertically centered responsive iframe

by Ben Foster

HTML

<div class="container">
    <div class="embed-responsive">
        <iframe src="//player.vimeo.com/video/85847275" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
</div>

CSS

html, body {
    height: 100%;
    margin: 0;
}
.container {
    height: 100%;
}
.embed-responsive {
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    margin-top: -28.1%;
    /* video height / video width */
    padding-bottom: 56.2%;
    height: 0;
    overflow: hidden;
}
.embed-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}