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 a video from Vimeo in WordPress without iFrame

By Rudolf Boogerman | Share this with your favorite social network
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.

Vimeo embedding

Then you will see a blue rounded box with the word “Share” on it:

Share video Vimeo

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:

Vimeo 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:

Vimeo old embedding code

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:

Html editor WordPress

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:

Informania III – Art video from
Rudolf Boogerman on Vimeo.

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!

Troubleshooting

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

Topics: Video Channels/Networks | Site search | Write comment
This article has 21 comments.



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

21 Responses to “How to embed a video from Vimeo in WordPress without iFrame”

  1. Dnyaneshwar
    Dnyaneshwar Says:
    July 23rd, 2012 at 7:59 am

    Hi there,Thanks for this tutorial. Could you plasee confirm one thing for me: when I click the SIGN UP HERE button in your example video, the video disappears and is replaced with the code from LinkedTube.Is that how it normally behaves, or is the video supposed to remain visible?Kind regards,Jason

  2. Rudolf Boogerman
    Rudolf Boogerman Says:
    July 25th, 2012 at 4:30 am

    I’m not sure what you mean, Jason. There is no “Sign up here” link in the video.

  3. staci
    staci Says:
    August 8th, 2012 at 2:51 pm

    Hey Jason,

    Is it possible Vimeo has made yet another change? Because the “use old embed code” link is no longer hot – it just pops up a message that says, “Heads up! Vimeo no longer supports this code.” Any advice is appreciated!

  4. Rudolf Boogerman
    Rudolf Boogerman Says:
    August 8th, 2012 at 3:03 pm

    Hi Staci,
    No, as soon as you click that link, the code in the text box at the top changes. You can safely ignore the warning “Heads up! Vimeo no longer supports this code.”, but you have to click that link that looks diabled. Just scroll up again and copy the code in the way I showed in the article.

  5. Liga
    Liga Says:
    November 27th, 2012 at 7:45 am

    Rudolf,

    you just solved my long time problem! I just can’t thank you enough :)))

    Liga from Riga

  6. Rudolf Boogerman
    Rudolf Boogerman Says:
    November 27th, 2012 at 4:57 pm

    Thanks, Liga. It is a pleasure to be useful to somebody. ;-)

  7. Barbara
    Barbara Says:
    January 1st, 2013 at 3:02 pm

    Using Andy’s Webtools on my club website: Why does embedded Vimeo video (old code) play beautifully on my iPhone and Surface, but delays opening and plays slow on my PC? New code won’t work at all…it just prints the code on the page – no video at all.

  8. Rudolf Boogerman
    Rudolf Boogerman Says:
    January 4th, 2013 at 8:50 am

    Hi Barbara,

    Did you place the code in HTML mode? If not, copy the code in Visual mode, then switch to HTML mode and paste it.
    If that does not work, please provide me with a URL to the page you are testing so that I can have a look.

  9. Asad
    Asad Says:
    February 8th, 2013 at 11:08 am

    This is also a great method to embed a video on your wordpress blog, but why don’t you just copy the link of the video and paste it in the media section?
    @Rudolf Boogerman, yes, you have to use the HTML mode in order to embed the video in visual style.

  10. Rudolf Boogerman
    Rudolf Boogerman Says:
    February 8th, 2013 at 11:18 am

    Because you have more options with embedding, Asad.

  11. vibhor
    vibhor Says:
    April 26th, 2013 at 7:29 am

    Thanks finally it worked. you cant believe i was just pasting the embedded code without clicking on Html.. i feel so stupid for not pasting it on html.
    Thanks once again
    Keep sharing stuff like this.

  12. Rudolf Boogerman
    Rudolf Boogerman Says:
    April 26th, 2013 at 8:37 am

    Hi Vibhor, It’s a pleasure! Good you got it working.

  13. Patrice
    Patrice Says:
    July 19th, 2013 at 4:11 am

    Hi, When you now try to use the OLD VERSION, cut and paste the code, it disappears when you hit update page.

    Just using the link on my wp site works, but I need to shrink the player. When I customize the player, copy and paste code, it doesn’t how on my wordpress site. Any advice?

    Thanks.
    Patrice

  14. Rudolf Boogerman
    Rudolf Boogerman Says:
    July 19th, 2013 at 10:55 am

    Hi Patrice, I just did another test and it still works, but you have to wrap the <code></code> tags around the embedding code and when you paste the embedding code, make sure you are in HTML mode. It even works in a comment box:

  15. Irina
    Irina Says:
    September 16th, 2013 at 9:14 pm

    Thank you! I panicked when I realized I can’t put the code into a nested frame. This is a huge relief. Works perfectly now. Thanks so much!

  16. motorbike bags
    motorbike bags Says:
    October 9th, 2013 at 11:45 pm

    Hello! I just wanted to ask if you ever have any trouble with
    hackers? My last blog (wordpress) was hacked and I ended up
    losing several weeks of hard work due to no data backup.

    Do you have any methods to prevent hackers?

  17. Rudolf Boogerman
    Rudolf Boogerman Says:
    October 14th, 2013 at 3:57 am

    Yes, you could install a firewall plugin. There are quite a few plugins available. Have a look at this discussion on LinkedIn:
    http://www.linkedin.com/groupItem?view=&gid=2203862&type=member&item=250744321&trk=groups_search_item_list-0-b-ttl&goback=%2Egna_2203862

  18. crystal
    crystal Says:
    October 18th, 2013 at 5:48 pm

    I’ve read & tried all of the above. When I do it the only thing that shows is any video descriptions but no video or player. Help!

  19. Rudolf Boogerman
    Rudolf Boogerman Says:
    October 28th, 2013 at 11:35 am

    Hi Crystal,
    This is because you are on wordpress.com. It does not accept the flash player. You best setup your own domain and install a standalone version of wordpress.

  20. Daphne Tarango
    Daphne Tarango Says:
    December 5th, 2013 at 11:56 am

    Hi, there!

    I did what you indicated up top, but it’s still not working. It shows a big space for where the video should be, but no video.

    Thanks!
    Daphne

  21. Rudolf Boogerman
    Rudolf Boogerman Says:
    December 10th, 2013 at 11:32 am

    Hi Daphne,
    If your site is not hosted on WordPress.com, I’m sure we cab fix this. Can you show me the page with the video?

Comments

Web Hosting

Web Hosting


Most popular posts

Recent Comments:

  • Dan: Hello, Thanks for video. Is it possible to setup Elastic Transcoder automatically convert media file that is...
  • Alex: Our company has used JW5 for a couple of years now on a VOD website. After firsthand experience with the...
  • Lisa: I stumbled on this review looking for a simple way to describe to a client the difference between Joomla and...
  • Eleanor Shannon: Hi, I have successfully embedded videos from my Vimeo Plus account into my blog but when you press...
  • Elaine: Okay, I found the two functions and it’s coming together. Slowly. Just gotta figure how to insert a...
  • Elaine: I just bought the Ultimate Value Pack as I want to convert a story and have different voices for different...
  • Patrick Marsh: Hi Rudolf, Your unbiased comparison and helpful responses are so generous! Thank you. I’m not a...
  • Fernando: Hi Rudolf, thanks for sharing this information. I needed to include a couple of videos in one of my...
  • Mike: Thanks. Although it didn’t work for me on macbook pro (Mavericks). It crashes and kicks me out. I like...
  • Keith: Enrique, For a static website, I do not recommend Joomla. Too big of a CMS and too bloated. WordPress would be...

Most commented posts

Copyright Rudolf boogerman © 2014, all rights reserved.