When you think of a media/mulitimedia wrapper, most people associate it primarily with making embedded videos responsive. For those of you who don't know about this, please allow me to explain.

This is the typical media wrapper:

<div class="media-wrapper">
    [VIDEO CODE HERE]
</div>

Simple, right? Here's the css that goes with it:

.media-wrapper {
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
}
.media-wrapper embed,
.media-wrapper object,
.media-wrapper video,
.media-wrapper iframe,
.media-wrapper div {
    height: 100%;
    margin: 0 !important;
    padding: 0;
    position: absolute;
    width: 100%;
}

The media-wrapper becomes an exact conatainer with dimension porportionally base on the with of it's parent window. So to break it down:

• the media wrapper has a position of relative, and a height of 0, which collapses the wrapper
• The padding-bottom of the media-wrapper sets, not just the [fake] height of the wrapper, but the aspect ratio as well. The top and bottom padding is based on the with of the wrapper, so if the width of the wrapper (which is 100%) is actaully 500px, then setting the padding-bottom to 56.25% (aspect of 9:16 or 9/16) will set the height of the wrapper to 281.25px (500px * 9/16 =281.25px).
• So, 4:3 videos would have padding-bottom of 75%
• If you need a perfect square, set the padding-bottom to 100%

Even if coded differently, the principles of the wrapper come in handy for other applications. Here, I have created a responsive tiled list: http://codepen.io/justinaven/pen/xAtng

Here is the structure:

<div class="tiled_image">
    <div>
        <img src="https://placeimg.com/300/200/tech">
    </div>
</div>

The <div class="tiled_image"> is, essentially the media-wrapper in this instance. It being a 1:1 aspect ratio (a square by means of a padding-bottom:100% ), that is being used to contain an image and restrain it to a certain size.

Here are some other uses:

• Responsive slideshow (http://codepen.io/justinaven/pen/qGEgF):
  • <div class="img-wrap"> is the media-wrapper in this instance
• Responsive cover-image-tiled-list (http://codepen.io/justinaven/pen/EjmqRd):
  • <a href="#"> is the media-wrapper in this instance)

The properties come in handy in several situations. Try recreating the wrapper. Try using it in a way not related to video.