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 videos from Vimeo on your site – revised

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

Vimeo.com has 3 standard ways to display videos directly on your website or blog.  In this article, I explain how to use the  standard method, Embedding.  In the coming article I show the other methods. But let me first sum up the all the options so that you know what to expect.

  1. Embed a single video.
  2. Widget: Badge – show a set of thumbnails for several videos.
  3. Widget: HubNut – show an slider with several videos.

Method 1 shows a single video on a page, although you can embed more then one video.
Method 2 displays a range of thumbnails from the last videos you created.  You can determine how many.
Method 3 does the same as method 2, except in the form of a slider (static or animated.
None of these methods require knowledge of coding, but you do need to copy and paste the code generated by Vimeo.  As said, the last 2 methods will be shown in the next article.

1. Embedding a single video

This is a straightforward process. You go into your Vimeo account and click one of your videos. Then you will see a blue rounded box with the word “Embed” on it.

Embed video from Vimeo

Click that button. A dialog box appears with the embedding options.  At the top, you can select the code and copy it to insert in your post or html page.
Updated info: Vimeo changed the embedding options. It works with iFrame now, which is fine for regular sites but bad news for content management systems. For Joomla or WordPress click the blue link called: Old embed code.

Vimeo embedding code

Note that the dialog box shows a preview of the video how it will look on your site with the current settings (although not every change is shown in the preview) :

HOLD ON! Before you proceed, there are some interesting options here.  You can customize the player, which is actually a good idea because in most cases, using the standard embedding code often results in a rather small video.  Therefore, click on the link at the bottom of the box that says: Customize size, color, and other options

The dialog box expands and shows you the following options:

The first thing I do is to set the video larger then 400pixels.  The great thing is that if I type 500 in the left field of the Size option, the right hand field automatically adapts in relation to the width because they are linked together.  The left field is for Width, the right for Height.

Like I said, changing Width or Height adapts the other field and this is a real time saver, otherwise you would have to calculate the relation between Width and Height yourself.  Thanks to this feature you simply can’t go wrong!
Below the Size fields, you have the Color option.  You can select another color from the dropdown list or a  color palette.
This influences the color of the Text on top of the video as you can see below. This way, you can adapt the color to match your site:

Further, you can use the Intro options to turn off/on the Title and Byline on top of the video.  Standard this is set On.  Then you have the Other options, which are self explanatory: Show text link below video places a link underneath the video which sends the visitor to the video on Vimeo.com itself if they click on it.  This can be useful if you want your visitors to show your own channel on Vimeo.  Generally, I do not use that option very often.

And the last Other option is to show the description of the video below it.  This makes sense if you wrote a description about the video in your Vimeo account itself.  Otherwise, leave it blank.

OK, now that we are all set, scroll up to the top of the dialog box again and select the code. Make sure you have everything copied in that box:

Vimeo again makes it easy for us, when you click in the box, the code is selected automatically.  However, if that doesn’t work for whatever reason, set the cursor wherever in that code box and then press CTRL+A (Windows) or Command +A (MacOS).  That selects everything for sure.
After that, press CTRL+C (Windows) or Command + C(MacOs) to copy the code.

Now go to your site:

  1. Select the page where you want to embed the video
  2. In the html mode of the page, place the cursor at the spot where you want to show the video
  3. Press CTRL+V (paste for Windows) or Command+C(paste for MacOs) to paste the code into the page.

If you are posting on a blog, you may need to wrap the embedding code between <code></code> tags, like below;  This is especially true for WordPress:

<code>
<object width=”500″ height=”281″><param name=”allowfullscreen” value=”true” /><param name=”allowscriptaccess” value=”always” /><param name=”movie” value=”http://vimeo.com/moogaloop.swf?clip_id=5367093&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00adef&fullscreen=1″ /><embed src=”http://vimeo.com/moogaloop.swf?clip_id=5367093&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00adef&fullscreen=1″ type=”application/x-shockwave-flash” allowfullscreen=”true” allowscriptaccess=”always” width=”500″ height=”281″></embed></object><p><a href=”http://vimeo.com/5367093″>Prisoner of Rules – art video</a> from <a href=”http://vimeo.com/rudolfboogerman”>Rudolf Boogerman</a> on <a href=”http://vimeo.com”>Vimeo</a>.</p>
</code>

And here is the result of that action, the embedded video:

Prisoner of Rules – art video from Rudolf Boogerman on Vimeo.

As you can see, just below the video are a couple of links on one line, embedded by Vimeo with the Other option. If you embed videos from someone else, you might not be able to set all options.  The owner of the video can disable certain settings.

Also note the full screen button.  If the video is High Definition, playing it full screen is a great experience.  You may want to tell your visitors about it because not everyone knows this.
You have my permission to copy the image below to inform your visitors on your own site.

Word of caution: on Vimeo, commercial videos are not allowed.  See also the article Vimeo-the-secret-of-good-quality/ for more info.

In the next article it is going to be very exciting when I tell you about the Widgets, because with them you can show a range of videos without much effort and it updates as soon as you change the content of the widget on Vimeo itself.  Stay tuned!

See also: How to embed Vimeo’s HubNut widget

Topics: Video Channels/Networks, Video/audio service reviews | Site search | Write comment
This article has 115 comments.



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