Vimeo Universal Player and Shadowbox JS

I don’t usually post how-to stuff on this blog, but I figured some WordPress, Shadowbox JS, Vimeo, and html5-ipad-loving users might benefit from it. A big thanks to Matt for making such a great WordPress-flavored Shadowbox JS plugin.

Here goes, it’s really rather simple:

1. Install the ShadowBox JS WordPress Plugin.
2. Login to your Vimeo.com account (some options used here are with Vimeo Plus)
3. Browse to the correct video and hit the “Settings” option in the upper right hand corner.
4. Hit the “Embedding” tab on the left hand side of the page.
5. Adjust your settings for your preferred playback options.
6. Click on “Get Embed Code” in the upper right hand corner of the settings and copy the full code.
7. Paste full code into a WP page or post and make sure you’re using HTML and not the WYSIWYG editor:*

<iframe src=”http://player.vimeo.com/…/…/” width=”640″ height=”360″ frameborder=”0″></iframe>

8. Copy only the URL from the iFrame code:

http://player.vimeo.com/video/…/…/

9. Add the ShadowBox rel tag and make a simple href with the URL:

<a rel=”shadowbox;width=640;height=360;” href=”http://player.vimeo.com/video/…/…/”>Test Link</a>

10. You should get something like THIS.

*As David points out in the comments, you may have to re-type quotation marks. Thanks David!