Topics

What's New?


Tags/Keywords

artifacts aspect ratio audacity audio audio service avs converter aws blogs brightcove camcorder cloudberry explorer cloudfront compression embedding firefox flash flash video flv hd hdv high definition hosting joomla jw player podcasting publishpod quicktime s3 s3 amazon s3 browser Skype software streaming video subtitles tubemogul upload video videocast video channel Video Channels/Networks video format vimeo wordpress xlr youtube

Online Marketing - OnToplist.com
Online Marketing

Free Favicon Generator

Page copy protected against web site content infringement by Copyscape



How to embed Vimeo’s HubNut widget

By Rudolf Boogerman | Share this with your favorite social network
35 comments... Click to Contribute.

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 www.vimeo.com 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.

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:

<code>
<object type=”application/x-shockwave-flash” width=”400″ height=”300″ data=”http://vimeo.com/hubnut/?user_id=rudolfboogerman&color=00adef&background=000000&fullscreen=1&slideshow=1&stream=channel&id=47546&server=vimeo.com”>    <param name=”quality” value=”best” />        <param name=”allowfullscreen” value=”true” />        <param name=”scale” value=”showAll” />    <param name=”movie” value=”http://vimeo.com/hubnut/?user_id=rudolfboogerman&color=00adef&background=000000&fullscreen=1&slideshow=1&stream=channel&id=47546&server=vimeo.com” /></object>
</code>

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=”http://vimeo.com/hubnut/?user_id=rudolfboogerman&color=00adef&background=000000&fullscreen=1&slideshow=1&stream=channel&id=47546&server=vimeo.com”>    <param name=”quality” value=”best” />        <param name=”allowfullscreen” value=”true” />        <param name=”scale” value=”showAll” />    <param name=”movie” value=”http://vimeo.com/hubnut/?user_id=rudolfboogerman&color=00adef&background=000000&fullscreen=1&slideshow=1&stream=channel&id=47546&server=vimeo.com” /></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=”http://vimeo.com/hubnut/?user_id=rudolfboogerman&color=00adef&background=000000&fullscreen=1&slideshow=1&stream=channel&id=47546&server=vimeo.com”>    <param name=”quality” value=”best” />        <param name=”allowfullscreen” value=”true” />        <param name=”scale” value=”showAll” />    <param name=”movie” value=”http://vimeo.com/hubnut/?user_id=rudolfboogerman&color=00adef&background=000000&fullscreen=1&slideshow=1&stream=channel&id=47546&server=vimeo.com” /></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

Topics: Video Channels/Networks | Site search | Write comment
This article has 35 comments.



35 Comments »


Page copy protected against web site content infringement by Copyscape

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. Backlink spammers won't be published, so don't even try.

35 Responses to “How to embed Vimeo’s HubNut widget”

  1. Salvo
    Salvo Says:
    June 12th, 2010 at 5:19 am

    Good tutorial.

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

    Very disappointed.

  2. Rudolf Boogerman
    Rudolf Boogerman Says:
    June 14th, 2010 at 6:55 am

    Hi Salvo,

    Indeed, it uses Flash and according to wordpress.com, 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. Joseph Adamson
    Joseph Adamson Says:
    October 24th, 2010 at 5:58 pm

    My videos do not play as expected, I have 43 but only two plays after that I keep getting error message. What have I done wrong

  4. Rudolf Boogerman
    Rudolf Boogerman Says:
    October 26th, 2010 at 4:33 am

    Hi Joseph,
    Can you give me a URL to the page where you embedded the Hubnut widget?

  5. Cap Blackard
    Cap Blackard Says:
    January 7th, 2011 at 4:04 pm

    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.

  6. Rudolf Boogerman
    Rudolf Boogerman Says:
    January 9th, 2011 at 9:29 pm

    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.

  7. Ben
    Ben Says:
    February 22nd, 2011 at 2:57 pm

    Salvo, if you knew what you were doing on WordPress, it would work just fine.

  8. Video is for eyeball &laquo; testaudience.com
    Video is for eyeball « testaudience.com Says:
    February 27th, 2011 at 2:12 am

    [...] YouTube channels at http://www.youtube.com/custom_player and embed Vimeo channels via the HubNut widget.) Tagged as: Vimeo, YouTube Comments Off Comments (0) Trackbacks (0) ( subscribe to comments [...]

  9. rick
    rick Says:
    June 15th, 2011 at 5:21 pm

    i have a wordpress.com site and i want to embed a vimeo hubnut…is that possible?

  10. Rudolf Boogerman
    Rudolf Boogerman Says:
    June 19th, 2011 at 2:22 pm

    Hi Rick, I don’t think you can.

  11. dustin
    dustin Says:
    October 28th, 2011 at 6:07 pm

    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!

    Thanks,

    Dustin

  12. Rudolf Boogerman
    Rudolf Boogerman Says:
    October 28th, 2011 at 7:55 pm

    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.

  13. Sarah Jones
    Sarah Jones Says:
    November 13th, 2011 at 9:35 am

    its really professional…. :-) thums up :)

  14. Gro Hoerthe
    Gro Hoerthe Says:
    November 29th, 2011 at 5:51 am

    We have suddenly problems with Vimeo video hubnuts that we have on the web site. It has worked for years, and suddenly the hubnut does not work (nothing changed by us, the videos look OK in Vimeo itself. I have seen this http://vimeo.com/forums/topic:44708 and wonder if I can just wait and see if the Vimeo staff solves the problems.

  15. Rudolf Boogerman
    Rudolf Boogerman Says:
    November 29th, 2011 at 6:45 am

    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.

  16. Gro Hoerthe
    Gro Hoerthe Says:
    December 1st, 2011 at 5:35 am

    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.

  17. Rudolf Boogerman
    Rudolf Boogerman Says:
    December 1st, 2011 at 6:24 am

    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.

  18. Marcell Black
    Marcell Black Says:
    December 7th, 2011 at 12:55 am

    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….

  19. Rudolf Boogerman
    Rudolf Boogerman Says:
    December 10th, 2011 at 10:17 am

    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.

  20. Allison
    Allison Says:
    February 2nd, 2012 at 1:10 am

    The hubnut widget looks like exactly what we need, but it doesn’t play. I have customized it to a channel, and the colors. The MySpace option you mention doesn’t appear. I set up a test of the widget here:
    http://www.brandu.com/Public/SP/BizDOA/9deadlysins-thumbnailtestpage/index.cfm
    As you can see, it scrolls fine and shows the thumbnails fine, but when I click on Play, the video opens and blanks out. Any thoughts?

  21. Allison
    Allison Says:
    February 2nd, 2012 at 1:13 am

    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!

  22. Rudolf Boogerman
    Rudolf Boogerman Says:
    February 2nd, 2012 at 8:14 am

    I do not have a Vimeo plus account and it works for me, so your problem is somewhere else.

  23. Allison
    Allison Says:
    February 2nd, 2012 at 7:10 pm

    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!
    Allison

  24. Rudolf Boogerman
    Rudolf Boogerman Says:
    February 2nd, 2012 at 7:12 pm

    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.

  25. theelysium
    theelysium Says:
    March 13th, 2012 at 12:06 pm

    I have a WordPress.org 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?

  26. Rudolf Boogerman
    Rudolf Boogerman Says:
    March 13th, 2012 at 12:10 pm

    Unfortunately, wordpress.org 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.

  27. Jerry Donahue
    Jerry Donahue Says:
    March 13th, 2012 at 11:56 pm

    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.

  28. Rudolf Boogerman
    Rudolf Boogerman Says:
    March 14th, 2012 at 5:58 pm

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

  29. Lloyd
    Lloyd Says:
    April 20th, 2012 at 5:19 am

    is it possible, each time you click to play a video the video plays in another iframe on the same page?

  30. Rudolf Boogerman
    Rudolf Boogerman Says:
    April 20th, 2012 at 7:20 pm

    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.

  31. How to embed a video from Vimeo in WordPress without an iFrame | Miracle Tutorials
    How to embed a video from Vimeo in WordPress without an iFrame | Miracle Tutorials Says:
    July 10th, 2012 at 4:29 pm

    [...] also: How to embed Vimeo’s HubNut widget (function() {var s = document.createElement('SCRIPT'), s1 = [...]

  32. Charles
    Charles Says:
    October 2nd, 2012 at 11:21 am

    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.

  33. Rudolf Boogerman
    Rudolf Boogerman Says:
    October 2nd, 2012 at 12:46 pm

    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.

  34. Jesse
    Jesse Says:
    March 26th, 2014 at 8:36 pm

    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.

  35. Rudolf Boogerman
    Rudolf Boogerman Says:
    March 27th, 2014 at 6:57 am

    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.

Comments

Web Hosting

Web Hosting


Most popular posts

Recent Comments:

  • Fernando: Hi Rudolf, thanks for sharing this information. I needed to include a couple of videos in one of my...
  • Mike: Thanks. Although it didn’t work for me on macbook pro (Mavericks). It crashes and kicks me out. I like...
  • Keith: Enrique, For a static website, I do not recommend Joomla. Too big of a CMS and too bloated. WordPress would be...
  • Amit: Hello Rudolf, I am facing a problem. Recently we made some nice video using Sony 2100 due to some reason the...
  • colin: I have power director 12 delux I have not been able to drag more than one file at a time on to the timeline....
  • Shareen: I give it a 10. Perfect sound and picture. I’m in Auckland, New Zealand.
  • Jesse: Hi there I was wondering if its possible to change the black background to transparent or if you know of a...
  • Enrique Vega: As per all above points, I can’t choose which CMS is better to utilize. Assuming that you need to...
  • Veda: The voices are NOT owned by NaturalReader, and the owners of the voices clearly mention that licensing is...
  • HeatherR: Though you have two vital concerns security and reliability for using the space you get over the web server...

Most commented posts

Copyright Rudolf boogerman © 2014, all rights reserved.