In order for the mobile embed to work, your video must have the correct privacy and video preferences settings. To check this, login to your Vimeo account and view Settings > Privacy for the video you want to embed. The screenshot below shows the correct settings for this page.

The correct settings for mobile-embedding a Vimeo video

You also need to ensure that mobile versions are being generated for your videos. To set your account to automatically generate mobile versions for all your videos (again, you must be a Vimeo Plus member – free members won’t get this option and it’s necessary to make this trick work) go to Settings > Video Preferences, find the option “Make mobile versions of videos?” and make sure you’ve checked “Yes, make my videos mobile-ready.”

Once you have your settings correct, you just need to add a bit of JavaScript to your site (continued in the next section).

In order to use the following code you must already have jQuery loaded. To try this out yourself, you should also have a webpage with at least one Vimeo video embedded.

There two parts to this code – the first part, myGlobals, contains two properties: uaiphone and uaipad. Each of these properties checks the userAgent value of the user’s web browser and determines if it’s an iphone or an ipad. By using a shorthand conditional, we can return a boolean for each property, which we can use anywhere to test whether or not to execute special device-specific code later.

The second part is the code that actually finds and replaces the Vimeo flash player with an HTML5 video link. The code comments in the example should be enough of an explanation into how this works – but the core concept is that we extract key information from the object element and it’s children (video id and player size) and use it to create new, Flash-free, device-appropriate HTML. By wrapping this in jQuery’s ready event, we can execute the switch passively. In other words, we drop this code in our site-wide .js file, and it will automatically replace the Flash videos with HTML ones whenever they appear.

//Make some global variables
var myGlobals = {
    //True if device is an iPhone
    uaiphone:   (navigator.userAgent.toLowerCase().indexOf('iphone')!='-1'),
    //True if device is an iPad
    uaipad:     (navigator.userAgent.toLowerCase().indexOf('ipad')!='-1'),
    //True if device is Android-based
    uadroid:     (navigator.userAgent.toLowerCase().indexOf('android')!='-1'),
}
//When dom is ready...
jQuery(function(){
  //If this is an iphone, replace video object with this code...
  if(myGlobals.uaiphone || myGlobals.uaipad  || myGlobals.uadroid){
      jQuery('object param[name="movie"]').each(function(){
        //Find the Vimeo id of this video
        var vidid = jQuery(this).attr('value').match(/clip_id=(\d*)\&/)[1];
        //Get the width of the video
        var vidwidth = jQuery(this).parent().attr('width');
        //Get the height of the video
        var vidheight = jQuery(this).parent().attr('height');
        //Start with this empty, assuming full quality (for iPad)
        var mobileQual = '';
        //Set to mobile quality if on iPhone
        if(myGlobals.uaiphone || myGlobals.uadroid){
            mobileQual = '&quality=mobile';
        }
        //Create the replacement HTML5 code for the video
        var vidlink = "";
        //Insert the new HTML5 after the original video
        jQuery(this).parent().after(vidlink);
        //Remove the original Flash content
        jQuery(this).parent().remove();
      });
  }
});

If everything goes according to plan, then any Vimeo videos on your site should look like this when viewed on an i-device…

A Vimeo embed fixed for iPhone

Note that you do not get poster frames using this technique – just a generic gray video button/box. There are tricks you could use to make this look better (a little CSS, perhaps), but I’ll leave that part up to you. The good news is that your embedded Vimeo videos should now automatically adjust themselves for iPhone and iPad users (this could probably be adapted for Android devices as well – but since I don’t have one, I can’t really experiment with it).