• Published
  • Filed under Portfolio

Fixing Vimeo via jQuery

A quick and easy trick for controlling the appearance of the vimeo.com video player. Vimeo gives you various options when you manually generate the embed code on their website (font colors, showing or hiding of title, username, user icon). However, if you use WordPress and take advantage of the super easy one-line embed method, you don’t have access to those options, and you get the defaults (everything visible).

If you frequently embed vimeo on your site — in my case, it was the solution used for the FABMIC website — you actually want both features: simple embed mechanism, and site-wide control of the player appearance.

How to obtain this, if we don’t have full access to the code mechanism of the iframe (that’s how the HTML5 compatible player is embedded)?

The solution: we can simply use jQuery to add the parameters that we need.

jQuery('#content iframe').attr('src', function() {
  return this.src + '?title=1&byline=0&portrait=0&color=ffffff'
});

Explanations:
title=1 will show the title of the video
byline=0 will hide the username
portrait=0 will hide the user icon
color is the color used by the font

Regarding the CSS selector (#content iframe): in our case, the vimeo embeds were the only occurence of an iframe that would show up inside the #content area. On the other hand, even if the script would get wrongly applied on some iframe, the parameters would probably have no adverse effect.

News: Projects

News: Tech & Code

News: Other