How to embed videos from Vimeo on your site – revised

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

116 thoughts on “How to embed videos from Vimeo on your site – revised

  1. Hi Rudollf,
    thanks a lot for sharing your experiences!
    I’ve read a few of your tutorials, and they are excellent, informative and easy to grasp.
    I really appreciate this.

    Cheers!
    /Petit

  2. Yes @Adam, it indeed sometimes helps to put the embedding code between those tags.
    Remember, the closing tag looks like this </code>

  3. Hi, nice for having You around, thanks.

    Do You know how to connect a vimeo embedding code snippet to an image/thumb inside a wp posting??!

    I tried different set ups – nothing worked so far …

  4. Hi @Cinoa,

    You actually can’t because the player of Vimeo resides on their server, and as such, you cannot influence it. But you could create a complicated workaround. If you install a lightbox plugin and then create an external html page which only contains the embedding code of Vimeo, then place an image in your article that links to that html page in such a way that it opens it in the lightbox, then it is possible. But I haven’t tested this myself.

  5. Hi Rudolf, I seem to be the only one on this planet that cant still embedd..

    am building my site on wamp and joomla (so its not online yet) i have followed the above technique on the admin side, after pasting the embedded link (i did add the <code> and </code> at the end. but all i get is the same url on my front page.
    Is there something else am suppose to do after </code> ??
    Thanks

  6. Malcolm, you are not the only one, trust me on that ;-)

    <code></code> actually only works with WordPress. For Joomla, you need to to go to the vimeo video you want to place, click on the icon Embed”.
    Then select “Old embed code“.
    Then you get something like this:

    <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&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=1&amp;color=a8a8a8&amp;fullscreen=1&amp;autoplay=0&amp;loop=0&quot; /><embed src="http://vimeo.com/moogaloop.swf?clip_id=5367093&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=1&amp;color=a8a8a8&amp;fullscreen=1&amp;autoplay=0&amp;loop=0&quot; type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="500" height="281"></embed></object>

    Copy that whole bunch of code and paste it into the html code view of the editor.
    That should work on joomla, I just tested it. But the method with iframe does not work.
    Hope this helps, Malcolm?

  7. @Rudolf…
    Yes..Yes…and YES, it worked…
    you just delivered me from my anguish, u cant believe i was just pasting the embedded code without clicking on Html.. i feel so stupid for not pasting it on html (how else will it work??!!!)
    Thanks once again, am off for a cold beer

  8. Hi,
    Nice article. But what about the “Method 2″.
    Can you please post something for Method 2.

    I need some guidancefor the same.

    thanks..

  9. Thanks for the great tutorial..Kindly tell me is it possible to enable viewer comments on my video when it is embedded on a website and how.
    Thanks again.

  10. Hi again Arun,

    Vimeo does not offer this functionality on their videos but if you work with a content management system like Joomla or WordPress, you can activate Commenting on every article/post. Thus, if you place a vimeo video in an article or post, visitors can comment in the comment box at the end of the page. now, if you only put a little bit of text under the video, then the comment box is close to the video. Not the ideal perhaps, but it can work. Many sites do it this way.

    With Drupal you probably have to install a comments plugin.

    For regular websites, this isn’t so easy because you need to involve a web developer to create comment functionality for you. This is not as expensive as it sounds, especially not if you go to http://www.elance.com or any of those developer networks where you can post a job offer.

  11. Thank you so much Rudolph for your help and your patience.
    I guess I’ll take a look at some of the CMSes like WordPress etc and try to do it myself.
    Thanks again for your help.

  12. It’s not that different, except that you have more options and to be honest, the design of the Vimeo player is a lot better.
    Although I like YouTube, I find vimeo regarding quality content and design superior.
    But that is a personal meaning.

  13. Hello, awesome tutorial!
    I have a question. I’m using wordpress and I’ve protected my videos with a password in the settings screen, as I want only registered users to my wp site to see these videos. As expected the vid on my site says ‘unauthorized access’. Is there a way to ‘embed’ the password into the code so vimeo displays the video in my site?
    Many thanks again!
    Bruno

  14. Hi Bruno,
    Even if you could put the password in the embedding code, it won’t do anything. Also, if you would do this, non- registered users would find the password in the source code and get access anyway.

    The best thing you can do is to work with a membership plugin like S2Member to restrict access to certain pages. The free version gives you enough options to work with.
    Hope this helps?

  15. Pino, your site is made in Flash, you cannot use embedding code in a Flash site. Instead you will have to import a video into your flash project. This is not possible with a Vimeo because you need an MOV video.

    I once tried to load external embedding code via a text file but it just showed the embedding code.

    I hope I understood your question correctly. My Italian is severely limited ;-)

  16. hey guys
    I cant get the thumbnail photo to come back up after the video ends – it just opens my video bank on Vimeo.
    can you halp me??

    thanks

  17. Hi Yuval,

    I’m not sure I i understand what you mean by a video bank. Do you have a sample page so that I can have a look?

  18. hey there,
    thanks for such a helpful tutorial. i was searching for ages trying to upload my vimeo vids at the correct size… you’re tutorial explained it all. :)

  19. Hi Rudolf

    I have a 16 minute video edit of some people talking at a charity conference. I was sent a number of files on a DVD.

    My aim was to upload to Youtube and show it on our site.

    I decided to try Moyea video converter, which worked fine and converted all the files to a single, 306M MPEG-4 file – which has a watermark as I only downloaded the trial.

    I uploaded the vid to YouTube but it’s over 15 minutes and YouTube threw it out.

    I’d be grateful for your advice on a couple of things. First…I noticed you recommended Handbrake on another post, as well as showing how to use AVS. Which is your preference? I don’t mind paying for a good program but free is always nicer :)

    Second…should I compress the video from its 306M size? NCH has a cheap program called Prism. Do you recommend compressing and is Prism worth buying?
    Prism is also described as a converter and options without and with MPEG-2. (So I am now very confused ;()

    Third…should I look at using Vimeo to stream the conf video rather than YouT would involve editing (a possibly impossible task).

    Fourth…I have an S3 account and I also have your S3MediaPro. The video will eventually be shown on a joomla site, currently in development. altho in the meantime, it’s a wordpress blog.

    I hope I haven’t asked too many questions!

    Thanks in anticipation.
    Tess

  20. Hi Tess,
    I have no preference for either HandBrake or AVS, they are both good in thier own way, except that HandBrake is on Windows and Mac + it is free.

    When uploading a video to a video service like YouTube or Vimeo, do not compress it because those services will do that anyway and you cannot compress a video twice because quality deteriorates dramatically that way.

    The hassle free solution will be to upload to Vimeo. Disadvantage is that Vimeo does not generate as much traffic as YouTube does.
    So, if maximum impact is a concern and you want to do the effort, upload it to Vimeo, then create a shorter version for YouTube. You only need to pinch off 1 minute, after all.

    I do not know prism myself, so I cannot comment on it, alas. MPEG-2 is a format for DVD, I would not use it for the web because the quality isn’t that great. MP4 is currently the most versatile container for video combined with the H.264 encoder you get a very decent video. Both the AVS and Handbrake tutorial on this site will tell you how to do that.

    Yes, I thought it was you, Tess. ;-)
    Not sure you knew, but we also have a WordPress version.

  21. Thank you Rudolf! :)

    I will try Handbrake and upload to Vimeo on the temporary WordPress site. Traffic is not critically important to this. The video is a record of an event, more of an archive and I think if I use relevant keywords, it might be easy for people to find it anyway. I will send you the link when uploaded.

    When the Joomla site is ready (in about a month’s time), I presume I can publish it using S3?

    I had noticed that you had a WP version, but can’t justify the cost as it’s not a commercial video.

    All the best and thanks for your wonderful support and good advice
    Tess

  22. Yes, you can publish it from your S3 account as well.
    May I ask what type of video the original is? You might be able to upload that directly to Vimeo without conversion upfront.

  23. The video was sent on a DVD in a folder with several files. I am just converting it using Handbrake right now!

    Will let you know how I get on….

  24. followed step by step your instruction but on my blog it’s displayed just the link and not the vid. My blog works with wordpress MU could you help me to find out a solution?

  25. Hi Paolo,
    It looks like WordPress is removing everything above that javascript link. Your source code only shows
    <a href="http://vimeo.com/25647403">GENTLEMEN'S SUMMERCAMP 2011 EPISODE #1</a> from <a href="http://vimeo.com/gmrproduction">GMRPROD</a&gt; on <a href="http://vimeo.com">Vimeo</a&gt;.

    While it should show:

    <object width="400" height="225"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=25647403&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=1&amp;color=ff0000&amp;fullscreen=1&amp;autoplay=0&amp;loop=0&quot; /><embed src="http://vimeo.com/moogaloop.swf?clip_id=25647403&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=1&amp;color=ff0000&amp;fullscreen=1&amp;autoplay=0&amp;loop=0&quot; type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="225"></embed></object><p><a href="http://vimeo.com/25647403">GENTLEMEN'S SUMMERCAMP 2011 EPISODE #1</a> from <a href="http://vimeo.com/gmrproduction">GMRPROD</a&gt; on <a href="http://vimeo.com">Vimeo</a&gt;.</p>

    Did you place the code via the html editor?

  26. My problem is exactly what you have mentionated. Yes I placed the code by the HTML editor and have also included the frame .
    I don't have this problem using embed code of youtube's videos!!!

  27. Also, this may be a silly question, but you did click on the link “Old embedding code”, right?
    iframes do not work on WordPress.

  28. The thing is, in your header, I see a the generator meta tage saying wordpress.com
    This is something you normally do not see on a self hosted site. Normally is shows the version of WP instead.

    Have you tried upgrading to the latest version of WordPress?

  29. I’ll try because I think it’s the best solution. I have anoter blog on altervista.org and they provide a latest version of wordpress that read perfectly the vimeo code

  30. Hi Rudolf.
    First of all, thank you for the tutorial.
    Second, my boyfriend (he doesn’t speak English, that’s why I’m writing) has a problem with embedding videos from vimeo to wordpress. For him the iframe actually works, but he’d like to know how to delete the title from the top of the video. He unticked the option for title and byline both, but only the byline has disappeared.

    We tried with the old code, but ran into what seems like the same problem as Paolo before; WordPress removes the beginning of the code and so it doesn’t work. We’re using the HTML editor and added both code tags as instructed…

    The web page in question is this:
    http://foodforpixels.com/documental/

    He’d like the blue “Elogio a la espalda” on top of the video to disappear. The code he is currently using is the new embedding code.

    Do you know how to help him?

    Thank you,
    Essi

  31. Hi Essi,
    What your friend has to do is when he clicks on Embed, is to click on Customize embed options at the bottom of the popup box.
    There he will see a set of choices in the form of check boxes, under which Title. Deselect Title and you will see that the title disappears.
    I hope this helps?

  32. hi I’ve just got my web people to add player and code and the video is way small in the player so I think your tutorial helps me sort this out. I assume in my site they can make player larger.

    just wanted to ask why when I click full screen mode (and it scales) does it go poor quality; the video is HD and high quality?

    thanks

    justin

  33. Dag Rudolf .
    Ik heb een filmpje van mij geupload op vimeo . Daarna heb ik het op mijn blog geplaatst.
    Mijn vraag is :
    Ik zou willen dat de kijker NIET mijn embed code kan zien , zodat men mijn film niet kan copieéren . WAT MOET IK HIERVOOR DOEN , graag een gedetaileerde uitleg aub .
    Bedankt bij voorbaat
    Groetjes Gentianni.

    • Dag Gentianni,
      Je kunt embedding code altijd zien, anders zou het niet werken, hoewel je eventueel zou kunnen experimenteren met een code obfuscator maar dat kan weer omgedraaid worden, dus veel zin heeft dat niet. Je kunt wel verbieden dat iemand je video daadwerkelijk download:
      Ga naar je Vimeo account
      Kies de video die je wilt beschermen
      Klik dan op Settings (rechterbovenhoek)
      Selecteer Privacy
      Maak de tickbox “Allow other people to download the source video.” leeg.

      Dit zal mensen beletten de video op hun computer te saven, maar het verhindert niet dat ze je embedding code copieren en op hun site plaatsen.
      Hier vindt je al de mogelijkheden in verband met privacy settings in Vimeo: http://www.vimeo.com/help/faq#privacy_settings_do
      Zoals op YouTube heb je de mogelijkheid om een video prive te maken, maar dan kun je alleen op uitnodiging de video zien, wat op een site onpraktisch is.
      Als dit echt heel belangrijk is, dan kun je beter met S3 Amazon/CloudFront werken, waar links naar videos binnen een tiental minuten al verlopen zijn en als dusdanig niet kunnen afspelen op andere sites.

  34. Translation from Dutch in response to Gentianni:

    You can always see embedding code, otherwise it would not work, although you could possibly experiment with a code obfuscator, but this can then be turned around so it is kind of pointless. You can forbid that someone actually downloads a video:
    Go to your Vimeo account
    Choose the video you want to protect
    Click on Settings (top right)
    Select Privacy
    Clean the tick box “Allow other people to download the source video.”

    This will prevent people from saving the video on their computers, but it does not prevent copying and embedding code on their site.
    Here you find all the options related to privacy settings in Vimeo: http://www.vimeo.com/help/faq # privacy_settings_do
    Like on YouTube, you have the opportunity to make a video private, but you can only see the video invitation, which is impractical on a site.
    If this is really important, you’re better off with Amazon S3 / CloudFront, which links to videos expire within ten minutes or so and as such can not play on other sites.

  35. Hi Justin,

    You probably uploaded a video that was already compressed strongly. Try to upload a video that has the least possible compression and you will see it improves the quality.
    Keep in mind that Vimeo will again compress your video, adding artifacts to it.
    If you did not compress the video, the only possible reason I can see then is that your video is smaller then the screen you are playing it on. Nothing can be done about that.

  36. Hi Ridolf,

    I am trying to embed a vimeo video on my joomla site and everything in this article helps and seems to be going well until I hit save. After I do, all the code disappears and leaves only the text I typed in my post but the video code is gone. I am putting the code in the HTML source editor. I have also tried putting the code in the source of the ‘insert/edit embedded material’ zone as well. Any thoughts? I feel like I’m so close but am the only one that can’t make it work.

  37. hi Rodolph thank you for this tutorial, but i have a question: when the movie is finished, 3 new videos appear, is it possible to hide them??

  38. Thanks for the tutorial. Unfortunately, with my Drupal install for whatever reason the video shows up, the sounds works correctly but the video itself doesn’t move. It just stays in one place while the sound works.

    I’ve tried using both the ‘iframe’ and ‘object’ methods and nothing. I’ve just removed the video for the time being….

    Thoughts on that problem?

    • Looks like you have a problem with your video. I don’t think this is related to the embedding code. Try to convert the original to another format and try again.

  39. Hi Rudolf, I am trying to embed a video in an eventbrite page that I am about to publish. However, it says I can’t because it is an iframe video. Do you know anyway around this?

    • Hi Erick, You need to select the old embed code if iframes do not work. It is explained in this tutorial. Have a look at the second screenshot from the top and the text just above it.

  40. Hi

    I began work on my blog a few months ago, and was able to embed several videos from vimeo, with no problem, following your instructions. Now I have almost finished but need to embed the rest of my films, i have not been able to. Each time, only the code itself is copied onto my blog, and not the video. Any ideas? Many thanks.

  41. Hi Beth,

    The slider only show 3 videos at a time, but when you click on the Next button, it shows the 4th, 5th, etc…
    If this is not what you mean, please provide me with a URL so that I can look into it.

    • Did you check if the fourth video is allowed to be embedded on websites? Perhaps the problem is there. Check the attributes of one of the videos that show up and compare it with the one that does not. See if you find a difference.

  42. Hi again. Why wouldn’t the 4th video be able to be embedded? It’s my own content, edited in FinalCut. The Vimeo generated code looks exactly the same as the others except for the file number of the video.
    Any other ideas?

  43. It depends, Beth. If for example you did not give permission to share the video on other sites by accident, it will not show up on your site either. It has nothing to do with the embedding code.
    Compare the “Privacy settings” in Vimeo with a video that shows and the one that does not show.
    -“Who can watch this video?” should be set to “Anyone”.
    -“Where can this video be embedded?” should be set to “Anywhere”.

  44. The permissions are okay. I was able to upload a smaller one just to test it. I’ll try re-exporting this video and then re-upload it and see what happens. Vimeo says I’ve uploaded my maximum for the week, so it may have to wait until the weekend before I can try it again.
    Thanks so much for your suggestions-

    • Very good, Beth. Let me know how it goes, ok?
      One question, though: Why don’t you try the other method without iframe? It seem to me more intuitive for the visitor to work with.

  45. I was able to upload it as SD instead of HD and it’s working. Maybe I’ll try another method at some point. I’m not crazy about double sliders, but am happy to have it working.

  46. What is the old HTML code for Vimeo videos? We can no longer access or find it next to our vids. Some sites don’t allow the new and improved iframe codes and we don’t see it on the help pages and it won’t let us switch back to the “old” Vimeo anymore.

  47. Hi Rudolf,

    My friend has a business prospecting page on a WordPress site that will display an embedded Vimeo video. I need like to have the page display a different video for different visitors. For example, I will have a video on Vimeo that is specific to plumbers, a video specific to roofers, a video for dentists, etc. I will be sending links via email to these prospective customers, appended to which I plan on inserting URL parameters (?utm_content) that will communicate to the site, upon arrival, which video to display. I figure using the Vimeo video ID number would probably make sense and be the most simple variable to pass along.

    I am not sure if this would be best accomplished through some javascript or through a wordpress plugin. That’s you’re decision. I do not want a wordpress plugin to cause conflicts with my theme or other plugins.

    Please help me out.

    Looking forward to hear for your response soon.

    Thanks
    Ashish

    • Hi Ashish,
      The easy way out would be to copy the source code of that business prospect page page and use that to create a separate .php page in the root of the domain that processes the variable utm_content and displays the correct video, using indeed the ID of the video.
      It will be faster then having to create a plugin that is going to check every page on the site while there is no need for that.
      Then work with a switch statement and set a default Vimeo URL in case some hacker tries out a non existing ID.
      No conflicts with themes or other plugins because it is a separate page that produces its own embedding code.
      That is how I would do it. I would use php, but that is a question of preference, you might as well use javascript.

  48. We are moving a website from vzaar to Vimeo because of the poor video quality at vzaar. The trouble is that we need to be able to generate image thumbnails for the videos to display on our website.

    Bizarely, I cant find an option to do this in Vimeo. And their naming structure for the images displayed on their website for your videos bears no relation to the naming of the videos, so you cant even copy the video id over and add a “.jpg” at the end or whatever like you can on other video hosting companies.

    Is there a way of doing this that I havent spotted?

    • No, you cannot do this via the regular embedding code because Vimeo uses signed URLs, so every time you refresh the page, you get another URL and ID.
      Even if you work with custom URLs via Advanced settings, thumbnails will not have the name you expect.
      What you could do is place thumbnails on your site, then use popups to show the video, but that requires some fiddling around with JQuery, etc…
      Another option is using the Vimeo HubNut or Vimeo badge, but again you do not have full control over the looks.

      If control is really important to you, you might consider using S3 Amazon/CloudFront with JWplayer of FlowPlayer.

  49. Howdy! I know this is somewhat off topic but I was wondering if you
    knew where I could locate a captcha plugin for my
    comment form? I’m using the same blog platform as yours and I’m having trouble
    finding one? Thanks a lot!

  50. Excellent post. I was checking continuously this blog and I am impressed!
    Extremely helpful info specially the remaining part :
    ) I handle such information a lot. I used to be seeking this certain info for a
    long time. Thanks and best of luck.

  51. Hello Rudolf.

    In 2013, Is this tutorial still relevant to the new Vimeo?

    You mentioned above:

    “If control is really important to you, you might consider using S3 Amazon/CloudFront with JWplayer of FlowPlayer.”

    We are trying implement this scenario:

    We want to display Videos we have on vimeo and have videos related to the current video being played display as thumbnails or links on the sidebar. Can this be achieve on the
    S3 Amazon/CloudFront with JWplayer of FlowPlayer you suggested above?

    • Hi Christian,

      Good question. There have been a few (primarily cosmetic) changes on Vimeo, which do not render this tutorial completely useless, but indeed it is time to write a new post on it to reflect those changes.

      You cannot play vimeo videos via JW player or S3 Amazon. With that remark I meant that you could place your videos on S3 Amazon instead of Vimeo. that way you have full control over your videos.

  52. Sorry for not being thorough. I meant moving our videos from Vimeo to S3 Amazon/CloudFront and then playing them on our site with JW Player.

    If that works, between CloudFront and CloudFlare, which would you recommend?

    And do you see any issues with using CDN/JW Player over Vimeo?

    Thanks for your help.

    • There is some confusion among developers about the need for a site on CDN. In theory, you only need CDN if you serve a lot of content, big images, videos and audios. But if you use Cloudfront for your rich media, you actually do not need a CDN site because the big burden of bandwidth happens via CloudFront. I have many customers with hundreds of videos on their site, while hosting the site itself on DreamHost or GreenGeeks via shared hosting and that works just fine. If you have big images, you can upload those to cloudFront if you like. It does not require a full site on CDN.

      It is only when you want to serve every page via CDN you could use a CDN service. I would not use cloudFront for this purpose because setting up a site there is like re-inventing the wheel. So in this scenario, CloudFlare seems to be a good solution as they basically re-invented the wheel for you. ;-)
      The question is rather: do you really need that? Is your current site really that slow?

      I hope this answers your questions? If not, fire ahead with new ones ;-)

      Advantages of using JW Player as opposed to Vimeo:
      You control how the poster images look
      You control the watermark and the link it goes to
      You control the skin of video player
      You can create your own playlist in any order you like.

  53. Hi there,

    thanks for the help! I’ve sucessfully embedded the Vimeo video in my WP website. The only thing is: On Vimeo, I set the embed code so that it won’t show portrait, title, or byline and set the color to decc09 – which it shows just fine in the Vimeo preview once selcted. But as soon as I embed it in my WP, it only sticks to the selection as far as the size is concerned…it still shows portait, title, etc… the code says “Portait=0&” etc.

    How do I make it do what I want?

    Cheers!

  54. Your willingness is contagious!

    We estimate uploads of over 350 HD videos per year with at least over 100 users viewing a video par time. This activity is expected to grow as years go by. From what you are saying, a good host (CloudFlare or any other Shared platform) would suffice for starters. And we could play the media with JW player. Right?

    Final questions:

    1) what would be security risk of this approach?

    2) is JW player media presentation mobile friendly?

    • Thank you, Christian!
      As long as you use a service that allows private streaming, like CloudFront, the security risk is minimal. But if you have projections like that, count on a rather heavy billing. For example, if those videos are 100MB each, then calculate thus: 350 videos X 100MB X 100 users= 3,500GB which amount to about $420 + the S3 bucket uploads.

      JW player is as mobile friendly as it gets, but this is a volatile market. Android keeps changing gear. Then they support Flash, then they don’t. The latest JW player 6.0 gave up on supporting Android due to unexpected behavior. However, I do not know any other player at this time of writing who gives better support. You may check out Flowplayer, which is specialized in HTML5, but it is not as advanced on the Flash part. JW player offers both Flash and HTML5 fallback but it requires a yearly renewal subscription since January 23th 2013 to continue using it.
      Decisions, decisions ;-)

    • No this is fine, Pippo. In the source code of your home page, I only see this: <div class=’embed-vimeo’ style=’text-align:center;’><iframe src=’http://player.vimeo.com/video/xxxxxx’ width=’621′ height=’350′ frameborder=’0′></iframe></div>. There is no formatting indicated. When you paste this code into your editor, make sure it is set to HTML.
      Here is an example:

      I used this code in HTML mode:
      <iframe src="http://player.vimeo.com/video/17054419?title=0&amp;byline=0&amp;portrait=0&amp;color=99022c&quot; width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

      This method only works in later versions of WordPress, by the way. For the older ones, who do not support iframes, use the Old Embedding Method.

  55. Thanks for the quick reply!

    I tried again now, but it seems my WP just won’t allow what I want. My source code from Vimeo is exactly what you posted, as soon as I hit update it just changes it to what you see on my HP…

    And the old embedding method Vimeo tells me is no longer valid.

    I guess I just have to live with it…

    • Living with it? Not if you are a persistent bastard like me, Pippo ;-)
      Vimeo says it is no longer valid, but that is nonsense. You can still grab that code and put it on your site.
      If that does not work, enclose it between <code></code> tags.
      In your case, it should look like this:
      <code>
      <!– This version of the embed code is no longer supported. Learn more: https://vimeo.com/help/faq/embedding –>
      <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=xxxxxx&amp;force_embed=1&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=99022c&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=xxxxxx&amp;force_embed=1&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=99022c&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="500" height="281"></embed></object>
      </code>
      Just change the bold part into the ID of your video.

    • Another solution would be to place the code in a widget. But tell me, is your site on WordPress.com or is it a standalone version? WordPress.com tends to remove everything to do with Flash, so in that situation there is nothing you can do.

  56. I have a Vimeo Plus acct (just bought it today).

    okay first let me tell you what I am TRYING to do:
    1. I want to charge people to buy my yoga instructional videos. ea video is a diff price.

    2.I purchased my own domain name and am using GoDaddys Website Builder to do this.

    I thought that I could add videos to my site (i do not want them to be shared or viewed ANYWHERE else), show a preview and have people ‘add to cart’ via paypal. once they purchase what video they want, they are allowed to view it and download it and watch whenever they please.

    Im having multiple issues (Im not the most computer savvy girl but Im also not an amateur). I’m beginning to think that what I want to do may not be possible without finding a host to make the whole site for me and to then take a percentage of ea video.

    please help me.
    all info is VERY appreciated.
    Lacey

    • Hi Lacey,

      My fist advice would be, do not use GoDaddy. When you run into problems, they are difficult to deal with and technically, they have all sorts of limitations in the hope to up sell you to a virtual server plan. DreamHost.com or GreenGeeks.com are much better in terms of features and support.
      They have one-click installations of a whole range of content management systems without any extra cost.
      You could try Joomla or WordPress, for instance. Then you need to install a membership system, which can be added to the content management system.
      In WordPress, they speak of plugins, in Joomla, they call it extensions.
      It is just a question of installing the extension/plugin once the content management system is installed.
      For Joomla you could use OSE Membership and if you go for WordPress, S2Member is a good candidate.

      With both systems, you can assign a page (or pages) per membership plan and in that page, you can place the specific video(s) belonging to that plan.
      Then, since you have Vimeo Plus, you can limit the videos in such a way that they only play from your website.
      I think WordPress would be the easiest to deal with and the S2Member plugin is not hard to configure (You can use the free version).

      Joomla requires a bit more technical knowledge and OSE Membership costs 99 GBP. Generally, I use Joomla when I need many categories and menus. You have more fine tuning options then WordPress. But I think in your case, Joomla would be overkill.

      I hope this is useful?

  57. Rudolf,
    okay, so I guess I am an amateur at doing this LOL.
    I read through your post, and it seems like their are a lot of suggestions as to which I should use, ie. wordpress, joomla, dreamhost, greengeeks…
    which one are you suggesting works the easiest/best for what I am trying to do?
    (I am trying to allow people to pay for my videos via paypal and then they can download it and view it whenever they want)
    Right now, with vimeo and godaddy, I have only been able to put a video preview on my site, w a ‘buy now’ button. when someone presses the buy now button, it charges them, and THEN I have to send them the real video VIA sugarsync (PAIN IN THE BUTT). I am trying to avoid having to send them manually.

    So, I would first buy DreamHost (isnt that why i have godaddy)?
    Then buy WordPress (isnt that the same thing as the website builder i bought through godaddy)
    and then buy S2 membership plug-ins (which I dont even know why I would need that)??
    and then I would still use my Vimeo Plus?

    This all seems like a lot just to do such a simple website. Is all this really necessary?

    in the meantime, I will buy all the things mentioned above and attempt to figure this out one last time. hahaha

    Lacey

  58. ********UPDATE*********

    rudolf,

    Okay, so I took some time to research what you had mentioned above. I believe that I may have figured out what you were saying!! :D

    okay, so I first get greengeeks, then wordpress, and I can use this http://wordpress.org/extend/plugins/tinypass/faq/ to charge ppl for my videos!

    So do you think I will even need VimeoPlus (or vimeo at all) if I buy and download this plug-in?

    Thanks again for your help!! I’m truly impressed with your skill.

    Lacey

  59. Very good, Lacey. Vimeo Plus will help you to limit where the videos can be viewed. That way, you are sure that nobody can link to your videos elsewhere.

  60. Hi, I have successfully embedded videos from my Vimeo Plus account into my blog but when you press full screen, the video page refreshes and pops you out of it. I asked Vimeo and they said the problem must be some weird javascript in the blog. Should I use a different video plugin to embed? have you heard of this? Thanks

    • Hi Eleanor,
      I had a look at your site and indeed it is very odd. It probably has to do with the theme you use.
      Perhaps you can use the old embedding code and see if that solves the issue because currently you work with an iFrame.
      If that does not work either, contact the authors of Ciola to report the issue.
      I hope this helps?

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.

Leave a Comment