«  
  »

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:*

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

  8. Copy only the URL from the iFrame code:

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

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

    10. <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!

Related posts:

November 24th, 2010 | Tags: , | Category: How-to, Instructional Technology
  • josh

    please update the example video since it was deleted…. 🙂

  • Andy Saltarelli

    Done. Thanks!

  • I tried to get it to work but after the text is clicked I end up with a link like this: http://stepouttime.com/%E2%80%9Dhttp:/player

    It does not activate in the lightbox

  • Andy Saltarelli

    Hmm… make sure you’re creating the href correctly — are you using the html editor in WP and not WYSIWYG? The link shouldn’t have anything about your site URL in it, just the Vimeo player link to your video. As long as Shadowbox JS is installed and activated, the rel=”shadowbox” will enable it for the link (and by default any jpg will go to lightbox when clicked which seems like the case on your site).

  • Craig

    Thanks dude, was just looking for this. Works like a charm.

  • Andy Saltarelli

    Glad it was helpful!

  • Tom

    Hi Andy – Thanks for the tutorial. It could be just what I’m looking for…however, it’s not working for me just yet. I’ve followed the steps and get the following message on my browser:

    “Not Found The requested URL /wordpress/â€?http://player

    €? was not found on this server.
    Apache/2.0.64 (Unix) PHP/5.3.5 DAV/2 Server at localhost Port 8888″

    Could this be because I am using MAMP?

    Also, rather than having a href to click on, I would like the video to be displayed as when using Vimeo’s universal player embed code, and then exapnd and play in shadow box when clicked. Would using a thumbnail be best for this?

    Thanks for your help!

  • Gunther

    My video doesn’t start it stay black 🙁 the player doesn’t appear, is it normal ? even if i copy your code to my site

  • Hi Andy,

    Thanks for this tutorial! I can’t seem to get this to function correctly and was wondering if you could see where I cam going wrong?

    Here is the page in quesiton (the ‘test link’ is where I have put the video):

    http://www.jeremygoodmansmith.com/northwestern/

    I have installed the Shadowbox JS plugin and enabled both elements (including the ‘Use Title from Image’ option’.

    The link redirects to a fullscrren vimeo viedo player rather than calling shadowbox?

    Ani ideas?

    Here is the code I am using:

    Test

    Many thanks for any advice!

    Best,

    Jeremy.

  • Cool, just what I needed to know. Thanks for posting. Do you know if it falls back to Flash on less capable browsers?

  • Andy Saltarelli

    Hi Tom,

    Sorry for the delay. I’m not sure if this will be helpful for you at this point. It does sound like your issues are connected to your use of a local server setup (MAMP). As for the thumbnail, I agree that would be the best option.

  • Jesse

    I tried to follow you’re instructions, but when I click on the link it takes me to the vimeo video and makes it full screen.

    Any idea?

  • Jimmy

    I was struggling with the wordpress+vimeo+shadowbox combo for a few days, then found this. Solved all my problems. Thank you so much for the help!

  • Andy Saltarelli

    Cool, happy it helped!

  • kailas

    Grateful for your post.

  • Andy Saltarelli

    Glad it helped!

  • Andy,

    I am getting 404 error not found. It shows the video on the blog page just as it would if you were embedding it. I entered the embed code in the html and then the

    window.onload = function() {

    Shadowbox.open({
    content: ‘file.swf’,
    player: “swf”,
    title: ‘ESC to Exit.’,
    width: 900,
    height: 506,
    options: {
    displayNav: false,
    modal: true
    }
    });

    };

    Code used in post:

    Test Link

  • Andy Saltarelli

    You’ve installed the plugin correctly? You shouldn’t need the shadowbox code, just the rel tag to call it out. Does is work with other media like pics? I would use the full Vimeo URL (i.e., http://player

    It might also have something to do with the size you’ve set for the video.

    Sweet video by the way.

  • Could not thank you more than enough for the discussions on your website. I know you place a lot of time and energy into them and hope you know how considerably I appreciate it. I hope I’ll do the identical thing for someone else at some time.

  • mark

    Hi,
    I’m having the same issues as Jesse, as when you click on the video it opens full screen and not in shadowbox. Any ideas?

  • Andy Saltarelli

    What are your size settings in the Shadowbox plugin page? In the href, just put the the player link with the video # not the rest of the Vimeo embed code (e.g., http://player.vimeo.com/video/%5Bvideo #]/) Have you tested on different browsers?

  • Hi and thanks of posting this information, I’ve been struggling with getting Vimeo to appear in Shadowbox and your article really helped.

    At first I had the same problem as some other people here where Shadowbox was not activating and instead I got a 404 error when a link like this tried to open:
    http://www.jandsvista.com/support/vimeo/”http:/player

    It turned out the problem was that when I’d copied and pasted the sample (as a starting point):
    Test Link
    The quote marks (“) were being turned into something else (right double quotes as it turned out). After retyping all these characters everything worked.

    I didn’t use the visual editor at any stage and it was virtually impossible to see the difference in the characters in the html editor.

    Thanks again
    David

  • Andy Saltarelli

    Hi David, I’m glad it helped. And thanks for the note on quotation marks… good catch!

  • Andy

    test disqus

  • Thanks for your post. Really helpful!

  • Andy Saltarelli

    You’re welcome!

Tags

Twitter