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

Comments

Web Hosting

Web Hosting


Most popular posts

Recent Comments:

  • Joomla Perfect: The best solution is do not try to upgrade your Joomla when you have Components like Ads Manager or...
  • Mr.Goose: I have built and maintained many sites using both Joomla and Wordpress. I have also developed...
  • Μαθήματα WordPress: I vote to wordpress!! easy and more flexible than joomla :)
  • David: This looks like it might be very useful for people setting up amazon-hosted videos on their site. But what...
  • Santa: Hi, I am building a classified and directory listing portal. Which one would be best Wordpress or...
  • Mary: I teach an ESL class and am creating my own subtitles for a video we will watch in our next class. I...
  • Denver Morgan: we have been using JW player for a while now we are a small church but if we have to start paying...
  • Carina: The company I work for is looking at ‘moving’ their website to another platform to make it easier...
  • Oshaf: Hi, I have an USB condenser mic and an USB audio interface, but it seems I can’t get them to work...
  • Mark Kan: Hi , great article! I’m looking to make a website and sell video lessons on cake making. Each lesson...

Most commented posts

Copyright Rudolf boogerman © 2014, all rights reserved.