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:
- Install the ShadowBox JS WordPress Plugin.
- Login to your Vimeo.com account (some options used here are with Vimeo Plus)
- Browse to the correct video and hit the “Settings” option in the upper right hand corner.
- Hit the “Embedding” tab on the left hand side of the page.
- Adjust your settings for your preferred playback options.
- Click on “Get Embed Code” in the upper right hand corner of the settings and copy the full code.
- Paste full code into a WP page or post and make sure you’re using HTML and not the WYSIWYG editor:*
- Copy only the URL from the iFrame code:
- Add the ShadowBox rel tag and make a simple href with the URL:
- You should get something like THIS.
<iframe src=”http://player.vimeo.com/…/…/” width=”640″ height=”360″ frameborder=”0″></iframe>
http://player.vimeo.com/video/…/…/
<a rel=”shadowbox;width=640;height=360;” href=”http://player.vimeo.com/video/…/…/”>Test Link</a>
*As David points out in the comments, you may have to re-type quotation marks. Thanks David!