Images

All images are responsive by default and will not overflow the boundaries of their container.

Constrained Images

Wrap the image in a container with the class .media to vertically center align any images.

Iframes

Containers are scaled when embedding an object from YouTube, Vimeo, or another site that uses iframe, embed or object elements.

Youtube

Add class .media to the media container.

Dailymotion

Add class .media to the media container.

Google Maps

Add classes .media to the media container.

View Larger Map

Vimeo

Add classes .media and .vimeo to the media container.

Vine

Add classes .media and .vine to the media container.

Instagram

Add classes .media and .instagram to the media container.

The Markup

<div class="media instagram">
    <iframe src="http://instagram.com/p/dJJvzMI4X8/embed/" frameborder="0" scrolling="no" allowtransparency="true">
    </iframe>
</div>

Video

Wrap the video element in a container marked with classes .media and .video.

Embed code taken from "Video For Everybody".

Download video: MP4 format | Ogg format | WebM format

Adding the class .widescreen sets up the media container for widescreen videos.