How to embed Vimeo’s HubNut widget

Vimeo has several ways to import video onto your site.  The badge widget displays thumbnails of your videos from Vimeo while the HubNut widget is a slider with videos.  The great thing with both widgets is that if you add videos or change them, this is automatically updated on your site or social network.  In short, once the widget is in place on the site or wherever, you don’t have to look back. In this article I discuss the HubNut widget.

Selecting and customizing your widget

Go to and log into your account. At the top navigation on the right, select Tools, and then  Make Widgets.

Then you get to see 3 options:

  1. HubNut widget
  2. Badge widget
  3. OS X Dashboard

We are not going to concern ourselves with the MacOs Dashboard at all because it is not meant to be used on websites, rather on your Mac desktop and this site is about a lot, but not about desktops :-)

1. Setting up the HubNut widget

You can use the HubNut to publish all of your videos on sites like MySpace at once. You can also use it to watch your Vimeo subscriptions on other sites like Netvibes.  And best of all, you can use it on your own site, which is what we are concerned with here.  To set it up, click Customize this, next to the thumbnail of the HubNut widget.

Customize your widget

When you click on that link, a new panel opens on the same page, on the right of the widget thumbnails.
As you can see below, there are a couple of options and below that a preview.

Customize HubNut

The first drop down menu gives you a range of possible video sets to select from. I discuss those one by one.

  • My videos are all the uploaded videos on your account.  Might be a bit much if you have loads of them. I think the other options are more interesting because you can filter some of the videos according to subject, for instance.  It’s not clear to me what the difference is between the two options of My videos.  Perhaps the second version shows any videos, even those not uploaded by you?
  • My subscriptions are the videos from channels or accounts you subscribed to, comparable with subscriptions on YouTube.
  • My Channels will show all videos in one of your own channels.  In Vimeo, you can create several  channels under one account which is VERY convenient.  Channels can contain your own videos or those of other Vimeo members.
  • My albums is a set of videos you selected on Vimeo and placed under one folder (album).  These can be videos from other vimeo members, eventually mixed with your own.
  • My likes are like favorites on YouTube.

When you select My channels or My Albums, you get an extra dropdown list just below it to select which channel or album. Note that when you change options, they are shown in real time on the preview beneath the options, which is very convenient.  In this example, I’m going to select My channels.

As you can see, a new drowdown list appears with all the channels you currently have.  I’m going to select Wooden Dimensions. In the preview window below it, you get to see the videos from that channel.  Now, if you only have one, it makes no sense to use a widget, unless you are planning to upload new videos soon.  If not, use the embed option described in How to embed videos from Vimeo on your site, because the widgets really shine with 3 or more videos.

OK, having done that, we go to the next option: Are you embedding this on MySpace?
Make sure it is set to No is you want to embed the widget on your own site.  Nobody stops you from turning back later and also place the widget on MySpace.  The generated code is just a little bit different.

Then, the Slideshow: You can turn it on or off.  I’m quite charmed by the animated slide show of videos, so I turn it On.  You can see the result directly in the preview and you can also test its behavior.

The other options are meant to customize the colors of the player.  This is useful if you want the player to match with your website color theme.

You can use the color list, which is a limited set of colors, or you can take the color palette to change the Highlight color.  If you change it, you will see the Vimeo logo change color.

Background color is the background of the player, which is standard set to black.  You can give this a funky color but make sure the colors don’t flicker.  Meaning, do not use pure colors opposite each other on the color wheel (complementary colors) or you will get a flickering effect that doesn’t go too well with visitors suffering from epilepsy, for example.
I’m going to leave the standard colors.

OK, now we are ready to get the code!  Click onthe  Get Code button. If all is well, and there is no reason why not, you will get a field with selected text (in blue), like this:

  1. If the text is not selected for some reason, click in the middle of the field.  That should select the text again.  If not, press CTRL+A (Windows) or Command+A (MacOs) to select all text in the field.
    When selected, copy it by pressing CTRL+C (Windows) or Command+C (MacOs).
  2. Go to your website or blog and open the page or post where you want the widget to appear.
  3. Set the page/post to html mode, this doesn’t work in visual mode (WYSIWYG).
  4. Set the cursor exactly where you want the widget and paste the code by pressing CTRL+V(Windows) or Command+V(MacOs).  If you are on WordPress, the safest thing to do is to wrap the code between code tags <code></code> after you pasted it, like this:

<object type=”application/x-shockwave-flash” width=”400″ height=”300″ data=””>    <param name=”quality” value=”best” />        <param name=”allowfullscreen” value=”true” />        <param name=”scale” value=”showAll” />    <param name=”movie” value=”” /></object>

Sometimes, WordPress wipes away part of the code after you saved the post. Putting the code between code tags tells WP to leave the code alone.

And here is the animated widget, with the code above.  The static widget looks the same but it waits for the visitor to interact with it.  The widget plays all the videos one after the other with a delay of 5 seconds in between from the moment you click a video:

Play around with this player and notice that you can play the videos full screen. I did notice a quality difference between playing videos on my own site and those played from Vimeo itself.
The Prisoner of Rules – video is very crisp and sharp full screen on Vimeo, while in the player, it is somewhat blurry. Not a big difference, but it is there. I think this is because HD is not turned on in the widget and there no option to do so.
Is that good or bad?  With a paid subscription (Vimeo Plus), you have monthly 25,000 views in HD.  Imagine you have a popular site and everyone plays your HD videos, then before you know it, you have to buy extra packages of bandwidth.
To play HD movies on your site, you can always use the standard embedding.

Enlarging the widget

Playing the videos in the widgets is all very fine but wouldn’t you want to see them somewhat bigger?  Let’s experiment with that.  The widget doesn’t leave us the option to make it bigger, so we need to change the size in the code itself.  See the parts in red, that is what we need to change, we leave the rest alone:

<object type=”application/x-shockwave-flash” width=”400” height=”300” data=””>    <param name=”quality” value=”best” />        <param name=”allowfullscreen” value=”true” />        <param name=”scale” value=”showAll” />    <param name=”movie” value=”” /></object>

I change the width to 500.  Since that is 1/4 extra, we have to divide the height (300) into 4 and then add the result to height.
300/4=75, so the new height becomes 375, like this:

<object type=”application/x-shockwave-flash” width=”500” height=”375” data=””>    <param name=”quality” value=”best” />        <param name=”allowfullscreen” value=”true” />        <param name=”scale” value=”showAll” />    <param name=”movie” value=”” /></object>

And this is the result:

You must have noticed the bands above and below the video on both players.  That is because my videos are widescreen. In order to remove those bands, we make the height smaller.
The dimensions become 500×282, like this:
<object type=”application/x-shockwave-flash” width=”500” height=”282” data …

I had to test with the height because my calculations didn’t give the desired outcome. When you take too much height away, you get borders left and right.   It requires some testing.  Have a look here:

In the meantime, you must have noticed that we have several widgets on this page. That means that you can have a widget for every channel or album if you want.
Next time, I discuss the Badge Widget.  Have fun with the HubNut!

See also:
How to embed videos from Vimeo

How to embed Vimeo’s Badge widget

36 thoughts on “How to embed Vimeo’s HubNut widget

  1. Good tutorial.

    This hubnut widget is great, but unfortunately, it doesn’t work under blogs, it seems because it uses a flash application.

    Very disappointed.

  2. Hi Salvo,

    Indeed, it uses Flash and according to, the following tags are not allowed on their system for security reasons:
    embed, frame, iframe, form, input, object, textarea and more.

    If you have a blog for professional reasons, I would opt for a standalone version, i.e. self hosted. Then you have a lot more freedom. We are currently working on a very affordable service to install Worpress for bloggers with hosting included. If this interests you, let me know. Export of existing posts will be included.

  3. I’m experiencing the same problem that Joseph and Salvo are describing – errors after letting hubnut play through a few videos straight and yes, it’s on a wordpress-based blog. Has a solution or alternative been found yet? Rudolf, feel free to e-mail me.

  4. Hi Cap,
    I do not experience this problem myself and I do not have direct access to the applications on Vimeo. Therefore, I think you best go to the forum of Vimeo and report the problem there. Sorry that I cannot help you with this myself.

  5. Hi,

    Two things:

    Why is it that sometimes not all the videos in my hubnut widget play (sometimes only three appear out of ten).

    Second, some of my clients see the player and a play button and no video. And in place of the video is says “undefined.” This started happening a few days ago.

    Please help!



    • Hi Dustin, Perhaps you should try to get the code again from Vimeo and replace the previous code. As for your clients, possibly they have no flash plugin installed? It is hard to help you if I do not see for myself what is going on.

    • Perhapse this is a temporary problem. However, since several people have it, there must be something going on. Did you change your template or added plugins? Lately we found out that more and more themes and plugins mess with the output of URLs containing special characters.

  6. No, the page is not changed. I might try to copy new code from Vimeo, but I have not done it yet as I was afraid to mess up. I have inherited the responsibility from someone else.

    • In that case, do a test with a new article and do a preview. That way you mess up nothing.
      Or you another test you could try is to grab the existing code, create a new html page and put it in the body, then save it on your desktop and try play it from there.
      If that does not work, something is wrong with the code. It is possible the code requirements have changed in that case.
      It is always a good idea to do tests in that way because it often rules out cms native problems.

      I hope this helps.

  7. Hey Rudolph, thank you for all of the information. Very very helpful, thank you.

    Do you know if this widget will work on a flash website? I’ve been scouring over the internet for an answer (everywhere from vimeo to even searching for examples), but I’m getting a lot of mixed thoughts.

    Thank you once again….

    • If you embed the code into a standalone html file, then you can call that file in flash. I cannot remember what AS command you have to use since it is a long time ago I did things like that, but I’m quite sure it is possible.
      Flash has some sort of iFrame option.

  8. Huh… looks like embedding is a Vimeo Plus option only. I’m not sure you mentioned that in the article above?
    That’s why the videos don’t play on our web page… sorry to have posted before. Thank you!

  9. Hi Rudolf,

    I’ve attached a screen shot of the error message. Since it’s our company’s account and it’s our video, I don’t understand why we don’t have permission to post on our website?

    One question… do the videos have to be public to be embedded? That’s the only thing I can think of…

    Thanks so much!

  10. Hi Allison,

    Yes, the video has to be public. Private videos can be played from Vimeo, not on your own site unless you have a Vimeo Plus account:

    Domain-level privacy (Plus + PRO only) by going to any video settings page and clicking the ‘Privacy’ tab, then choose the ‘Only on approved sites’ option under ‘Who can embed this video?’ Add the domain names for sites on which you want to allow your video to be embedded.

  11. I have a site at work and I can’t get the HubNut to work. Is there a plugin I can install that will allow the HubNut to work or a plugin that looks like the HubNut?

    • Unfortunately, does not allow embedding anything to do with Flash. It is best to run a standalone version of WordPress because the org version has loads of restrictions. It is an old pain.

  12. Hubnut widget is garbage. We paid for a
    Pro acct to use the widget to show our production work on our site. Because we produce commercials, we had to opt out of the Community. However, the widget won’t wont work with opted-out content in IE & Safari. Vimeo for weeks & weeks just says “we’re working on it”. What a waste of money paying for a “pro” account, and shame on us for assuming that Vimeo actually was a professional tool.

    • That doesn’t sound too good, no. I hope they will solve it quickly. I can imagine this is frustrating for you.

    • Hi Lloyd,

      The hubnut controls the output, therefore it is not possible to do what you suggest, unless you disregard the hubnut altogether and write your own html code. You could embed a video in each html page and link that to a thumbnail in an article with a lightbox, for instance, but it is quite a lot of work and it does not update automatically.

  13. Has anyone tried to use hubnut with a flat screen monitor? I have 2 new Samsung monitors for displaying our university video content via the TV’s web browser. Whenever I play the hubnut playlists, they stall out after a couple of videos play. They cannot be started again by clicking and become unresponsive. I have to reload the web page. The flat screen is on 100Mb ethernet.

    • I have no problems with the hubnut myself on flat screens. My internet connection is like yours: 100Mbs ethernet.
      But it is possible that the TV web browser has issues with the hubnut. I use regular web browsers.

  14. Hi there I was wondering if its possible to change the black background to transparent or if you know of a similar widget that looks the same but has a transparent background.

  15. Hi Jesse,
    There is no transparent background, but you can adapt the background color, setting it to the same color as the background of your site. In this way you can imitate transparency. This won’t work when you have an image as a background, but that can’t be helped.

  16. I have Vimeo Pro and I am using the Hubnut widget. It works fine with 1 exception. In each Hubnut video it places my name and a title under each video. Each is a link that I did to make or place. They link back to the Vimeo site an show all my videos!

    Anyone know how to delete this link. There is one on my home page.

If you have any questions or suggestions, you can leave a comment on this article below. Comments are subject to an approval process before they are published. By posting a comment, you agree with the terms of use.

Leave a Comment