Last Updated: February 25, 2016

Fit to container video/image in CSS (aspect ratio friendly)

Scale up/down an image or video to fit in container width/height maintaining the aspect ratio (And keep it centered aligned vertically and horizontally)

.wrap {
 background: yellow;
 border: solid 1px red;
 width: 384px; /* Play with this value */
 height: 216px; /* Play with this value */
 font-size: 0;
 text-align: center;
}

.wrap:before {
 content: "";
 width: 1px;
 height: 100%;
 display: inline-block;
 vertical-align: middle;
 margin-left: -1px;
}

.wrap video {
 max-width: 100%;
 max-height: 100%;
 display: inline-block;
 vertical-align: middle;
}

Try to play with width/height in: http://dabblet.com/gist/5610937