Vimeo Embeds on the iPhone

Posted on June 11, 2010, 1:28 pm, by Brian, under Working on the web, jQuery.

Vimeo does not (at the time of this writing) have an iPhone/Pad version of their embed code. After seeing this solution , I had a need to do something similar but with all Vimeo embeds sitewide.

jQuery to the rescue and must be included for this to work – best used in a dom ready event.

    var agent=navigator.userAgent.toLowerCase();
    var is_iphone = (agent.indexOf('iphone')!='-1');
    var is_ipad = (agent.indexOf('ipad')!='-1');
    if(is_ipad || is_iphone){
	$('embed').each(function(i){
	    var el = $(this);
	    if(el.attr('src').indexOf('clip_id') != -1){
		var reg =  new RegExp(/clip_id=\d*/gi);
		var clipid = el.attr('src').match(reg);
		embed = "<video src='http://www.vimeo.com/play_redirect?"+ clipid + "&quality=mobile'  controls='controls' width='"+el.attr('width')+"' height='"+el.attr('height')+"'></video>";
		el.parent().after(embed);
		el.parent().remove();
	    }
	})
    }

* Note: this solution requires  a Vimeo plus account and you  need to enable “Mobile Embedding” found in | Settings > Embed  – for each embed.  Also, vimeo could change their architecture and break this system.

Tags: ,
Comment (RSS)  |  Trackback