malrase/campsass-site — pull request #1 by trotzig (2014-03-18 01:23:09+00:00)
Title: Make Vimeo video have fluid width

I've been snapshotting this site using Diffux [1] and noticed that the
Vimeo video on the start page was overflowing the width on mobile. To
make this work better responsively, I applied a technique described
here:
http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

The basic trick is to create a wrapping elemnt and use padding to make
its width:height ratio 16:9, and then absolutely positioning the iframe
inside the wrapper and apply a 100% width and height.

Snapshot of the page before:
https://dl.dropboxusercontent.com/u/36290073/campsass_diffux_before.png

...and after:
https://dl.dropboxusercontent.com/u/36290073/campsass_diffux_after.png

(Note that these snapshots are done using PhantomJS, so they will not
look the same as on a mobile).

[1] https://github.com/trotzig/diffux