Updated 26 November 2015 – 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 black rounded icon with a paper airplane:
Click that button. A dialog box appears with share and embedding options. Since we want to embed the video, we are only interested in the Embed options. At the bottom right, click Show options:
The panel enlarges after clicking on the link. Scroll down a little until you see the options just below your video:
You can test various options which show in realtime on your video. Generally, you will want to set the Size according to the width of your page. When you change a value in either the width or height, the related value changes in relation with the dimensions (aspect ratio) of your video:
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!
You can change the Color as well. This influences the color of the Text on top of the video. This way, you can adapt the color to match your site. Select a predefined color (little boxes) or use the color selector to create a custom color:
The Intro has 3 options: Portrait (which is your Vimeo avatar), Title (of the video) and Byline (author name).
Special stuff determines the behavior of the video player. This is quite self-explanatory:
For instance, if you want the video to start playing automatically upon page load, tick the Autoplay this video box.
When you are done, you can select the embedding code at the top of the panel:
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 or post where you want to embed the video
- In the html mode (Text tab in WordPress) 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.
Keep in mind that standard, this is the iFrame method. Not all content management systems allow this. In the past, this was not possible in WordPress, for instance. But since version 4.x, this is no longer a problem. Here you see an example of an embedded video with the iFrame method:
What if iFrame is not supported on my site?
On Joomla, you can use a wrapper module. In that case, just copy the link to the video from the address bar or use the Share link at the top of the panel. You will have to set the width and height manually in that case.
Another method which allow to embed video in any site:
In the same panel, you can scroll down to the bottom, where you find a link called Use old embed code:
As soon as you click on it, the code at the top of the panel is updated. Scroll up and see how the code has changed:
Note that there is a comment (underlined in red here) above the embedding code that says that the embed code is no longer supported, but you can disregard that, it does work. I just wouldn’t use it unless you really have to.
Here is an example of the same video with the old embed code:
Is the player responsive?
Yes and no. The video will shrink according to the width of the browser window, but you get black bars at the top and bottom when the size becomes smaller then what you have set in the Embed options. This is not really ideal, but if you are non-technical and you don’t mind those bars, you are good to go.
If you are a web developer, to make the player fully responsive, you need to wrap the iframe in divs. Here is a technical article that describes the process:
If you are posting on a old WordPress blog, you may need to wrap the embedding code between <code></code> tags, like below:
<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>
Word of caution: on Vimeo, commercial videos are not allowed in the Free and Vimeo Plus account. See also the article Vimeo-the-secret-of-good-quality/ for more info.
Can’t I just plug in a link to the Vimeo video?
Yes, you can in WordPress since version 4.3. In that case, just use the Share link, like https://vimeo.com/147170777 and paste it in text mode in your post or page. The only problem is that you have no control over how the player behaves, but if that is no problem for you, it’s the fasted method.
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!