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.

Comments

Web Hosting

Web Hosting


Most popular posts

Recent Comments:

  • Joomla Perfect: The best solution is do not try to upgrade your Joomla when you have Components like Ads Manager or...
  • Mr.Goose: I have built and maintained many sites using both Joomla and Wordpress. I have also developed...
  • Μαθήματα WordPress: I vote to wordpress!! easy and more flexible than joomla :)
  • David: This looks like it might be very useful for people setting up amazon-hosted videos on their site. But what...
  • Santa: Hi, I am building a classified and directory listing portal. Which one would be best Wordpress or...
  • Mary: I teach an ESL class and am creating my own subtitles for a video we will watch in our next class. I...
  • Denver Morgan: we have been using JW player for a while now we are a small church but if we have to start paying...
  • Carina: The company I work for is looking at ‘moving’ their website to another platform to make it easier...
  • Oshaf: Hi, I have an USB condenser mic and an USB audio interface, but it seems I can’t get them to work...
  • Mark Kan: Hi , great article! I’m looking to make a website and sell video lessons on cake making. Each lesson...

Most commented posts

Copyright Rudolf boogerman © 2014, all rights reserved.