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.
- Embed a single video.
- Widget: Badge – show a set of thumbnails for several videos.
- 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.
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.
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:
- Select the page where you want to embed the video
- In the html mode of the page, place the cursor at the spot where you want to show the video
- 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:
<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>
And here is the result of that action, the embedded video:
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!