Media

Responsive media elements that scale with your browser.

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.

Constrained Images

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

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 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.

Getty

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

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

Twitter, Facebook, SoundCloud, Storify, and Scribd (select 'Autosize') already provide responsive embed code.

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>