To scale a Vimeo video to fit any browser, tablet or mobile device for responsive design you can use either a CSS or Javascript solution to accomplish the goal.
This example uses fitvids.js a javascript solution that injects HTML and CSS to the Vimeo video code markup, this is the work of Chris Coyier.
The Process
The first thing that you need is the Vimeo iframe embed code, grab that in your video share options from the Vimeo site.
Place the iframe code on your page, in this page example the iframe's container div (div.vimeovideowrap) has 2 CSS declarations for width, it has a width:80% and a max-width:640px.
It has the main width set to 80% as then it will keep it's width in proportion to its parent container when scaling, you need to find the percentage figure that works in your design, in this example the parent container is the div.wrapper.
I also don't want the video displayed any wider than 640px, so that's why the max-width is set to 640px.
From here we need to add in some Javascript, we need the latest JQuery and fitvids.js and we need to trigger the fitvids code to fire with our Vimeo video so we also need to create a small additional javascript file to fire it when the page is ready.
Setting Up the Javascript Files
Grab fitvids.js extract it and then copy the jquery.fitvids.js file to your webroot.
Grab the latest jquery.
Declare these 2 scripts in the head of your document, below I am calling the jQuery hosted latest JQuery and the fitvids.js is filed in my /js directory in my webroot:
<script src="//code.jquery.com/jquery-latest.min.js"></script> <script src="../js/jquery.fitvids.js"></script>
Create a custom javascript script to fire fitvids, this is documented in the README.md in the fitvids folder, in the example on this page a custom.js file is referenced in the header:
<script src="../js/custom.js"></script>
With the following contents:
jQuery(document).ready(function(){
// Target your #container, #wrapper etc.
jQuery(".vimeovideowrapper").fitVids({ customSelector: ""});
});The key thing to add here is a container that the video descends from, here the example uses .vimeovideowrapper, it could also be a container higher up the tree such as .wrapper, this would be a better selection as all Vimeo videos on the page would be targetted.
That's it the video should now scale as you change the viewport size, this will also work the same way using videos from YouTube.
One thing to note is that the Vimeo video won't play on mobile devices iPhones like the 3GS and 4, unless the Vimeo account is Pro or Plus where the uploader gets to choose to also create mobile compatible videos, this does not effect tablet devices.