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.
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
Iframes
We've provided responsive wrappers for iframe embeds from many popular sites.
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>