By Rudolf Boogerman |
21 comments... Click to Contribute.
As explained in the older article, 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 to place videos in WordPress. Since WordPress does not accept the iFrame method, we need to use the old embedding method. Vimeo makes it a bit more difficult these days to use the old method because they want to support mobiles as well. Although it is understandable they want to move forward, they made it more complicated then necessary, so let me make it easy for you to find out how it works.
Embedding a single video
You go into your Vimeo account and click on My Videos.
Then you will see a blue rounded box with the word “Share” on it:
When you click that icon, a dialog box appears. In the past, you would find the link to the old embedding code link at the top, but that has changed. You now have to click the link Customize embedding options:
The dialog box will become bigger now, showing a range of customization options:
For instance, you could change the display size on your site or change the behavior of the Vimeo player. You find more on that further down in the tutorial, but for now, we concentrate on getting the old embedding code since the regular iframe method does not work in WordPress.
The dialog box also has a rather discrete link to use the old embedding code at the bottom, which says Use old embed code.
But when you click that link, nothing seems to happen! It only shows a tip tool telling this embedding method is no longer supported:
However, the good folks of Vimeo did not totally abandon us, you simply scroll up again and if you look closely, the code in the embedding box has changed since you clicked the link. In other words, by clicking that link at the bottom, it changes the iFrame code into the old embedding method:
Copy the code in that box by clicking anywhere in that text box. Normally, the text should become selected. If that is not the case, you need to select the code by hand and press Control+C on Windows or Command+C on Mac.
In the code is a sentence that says:
<!-- This version of the embed code is no longer supported. Learn more: https://vimeo.com/help/faq/ embedding -->
You can safely ignore this warning although it tells you that at some point of time, the old embedding method will no longer work. But for now, you can use it.
Open a post in your WordPress site and paste the embedding code, using the html mode, not the visual editor:
The reason for using the html mode is that the visual editor will change all special characters in the code, so it won’t work on the front end of the site. Below, you see the old embedding code in action:
Customizing the player
In the old embedding option, the preview does not react to changes you make in the custom settings as it did in the past. I’m afraid you will need to experiment a bit here. However, the old article can give you some clues in this respect: How to embed videos from Vimeo.
One of the things you may want to change is the size. The great thing is that if I type 600 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!
Embedding videos from Vimeo does not work on sites residing on wordpress.com. You need to have a standalone version of WordPress on your own domain in order to embed ANY video or audio at all. Due to security measures, wordpress.com blocks all display of embedded media.
See also: How to embed Vimeo’s HubNut widget