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