Media

Responsive media elements that scale with your browser. Images, Iframes and Video have all been styled to ensure they adapt to your viewport.

The code here is based on research and work by Theirry Koblentz, Anders Andersen, Niklaus Gerber, and Jeff Hobbs.

Images

Images are responsive by default ensuring they do not overflow the bounds of their container.

responsive image
responsive image
responsive image
responsive image

Constrained Images

Vertically and horizontally constrained and centered. Wrap the image in a container with the class .media.

responsive image
responsive image
responsive image
responsive image

Adding the class .four-by-three will change the aspect ration from the default of 16:9.

responsive image
responsive image
responsive image
responsive image

Iframes

We've provided responsive wrappers for iframe embeds from many popular sites.

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 to the media container.

Vine

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

Instagram

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

Getty

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

Markup

<div class="media">
    <iframe src="http://www.youtube.com/embed/eRW84aVCMWo" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></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

Markup

<div class="media video">
    <!-- "Video For Everybody" http://camendesign.com/code/video_for_everybody -->
    <video controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360">
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
        <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
            <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
            <param name="allowFullScreen" value="true" />
            <param name="wmode" value="transparent" />
            <param name="flashVars" value="config={'playlist':['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg',{'url':'http%3A%2F%2Fclips.vorwaerts-gmbh.de%2Fbig_buck_bunny.mp4','autoPlay':false}]}" />
            <img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360" title="No video playback capabilities, please download the video below" />
        </object>
    </video>
</div>