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.
Constrained Images
Vertically and horizontally constrained and centered. Wrap the image in a container with the class .media.
Adding the class .four-by-three will change the aspect ration from the default of 16:9.
Iframes
We've provided responsive wrappers for iframe embeds from many popular sites.
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>