Embedding Vimeo videos and mobile devices: a solution in jQuery

At the moment of writing this, VIMEO video embedding doesn’t work properly for mobile devices. Until a solution is provided, i worked on a solution for this.

This is what my solution does: via jQuery, it detects mobile devices, and replaces the embedded Vimeo video player by the appropiate link to the Vimeo website for mobile phones. In three easy steps:

1 - Detect mobile

I just downloaded a jQuery script from Detect Mobile Browsers (dotcom), and added it to my website, just after loading jQuery.

<script language="javascript" type="text/javascript"
  src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script language="javascript" type="text/javascript" src="[path]/detectmobilebrowser.js"></script>

This script will create a new property, jQuery.browser.mobile, which will be true if the browser is a mobile device.

2 - Replace all Vimeo iFrames by appropiate links to Vimeo for Mobile, pointing to the right video.

This is the code. Just put it inside jQuery’s ready funcion and you’re done. You can also put it inside a function and fire the function whenever you need it if you prefer.

if (jQuery.browser.mobile == true) {
$('iframe').each(function() {
if ($(this).attr('src').indexOf('http://player.vimeo.com') != -1) {
var videoiFrame;
videoiFrame = {
height : $(this).height(),
width: $(this).width(),
src : $(this).attr('src')
}
// Find video code
var videoCode = videoiFrame.src.split('?');
videoCode = videoCode[0];
videoCode = videoCode.split('/');
videoCode = videoCode[(videoCode.length -1)];
// videoCode found, now replace iFrame
$(this).before('<a class="mobile-video"
  style="width: '+ videoiFrame.width +'px ; height: '+ videoiFrame.height+'px;
    line-height: '+ videoiFrame.height+'px;"
  href="http://www.vimeo.com/m/'+ videoCode + '"></a>');
$(this).remove();
}
});
}

And that’s it. Tested succesfully on my Nokia Lumia 800 (which has no Flash, jusy like iphone). Thanks to the People at Detect Mobile Browsers (dotcom). If you test it in other devices, please let me know.