Embedding YouTube & Vimeo Videos in WordPress

Posted on by

Share Button

If a picture is worth a thousand words, then how much is a video worth? A video can teach, inform, demonstrate, and help sell your products. With the popularity of large sharing sites like YouTube and Vimeo, adding videos to your website has become quite easy. This tutorial will provide a step-by-step guide using WordPress as an example.

header

How YouTube & Vimeo Embed Videos

Both YouTube and Vimeo use an iframe to embed videos on other websites. The iframe can be thought of as a webpage within a webpage. Inside the iframe is a webpage controlled by YouTube or Vimeo, outside of the iframe is your webpage controlled by you. This allows for all of the functionality of the video service, without you having to worry about any of the work.

YouTube

To get started go to YouTube and select the video that you want to embed. Below the video are some options, you need to click on “Share”.

youtube_share_video

When you click on “Share” you will see a new set of options. The sharing URL of the video will already be selected. To display on WordPress, just copy the URL.

youtube_share_URL

With the URL copied, go to WordPress and paste the URL into the post or page where you would like the video to be displayed. It does not matter if you are on the Visual or Text editor in WordPress.

youtube_in_wordpress

In the WordPress editor you will see just the link, however if you use the Preview function you will see the actual video. When your post or page is published or updated, the video will display properly.

Vimeo

On Vimeo the sharing options aren’t as straightforward as YouTube, you need to hover your mouse over the video and then select the Share option which will appear in the upper right of the video window.

vimeo_share_video

A javascript pop-up window will appear that provides the sharing options. The link will already be selected, you just need to copy it.

vimeo_share_link

With the link URL copied, go to your WordPress post or page and paste the link in, just like was done for YouTube.

The Embedded Videos

By default the following are examples of how the videos are displayed. You will note that YouTube does a slightly better job of this.

Alternative Methods

There are a couple of alternative methods depending on how comfortable you are with HTML code. If you are only slightly comfortable, then using one of the popular plugins may be the best route for you. However you have a little comfort with HTML, then you can customize how the videos are embedded without using plugins.

YouTube

In YouTube to get the iFrame code, after you click on “Share” you will need to click on “Embed”.

youtube_embed_1

After you click on Embed you will be provided with some extra options including the ability to set the size of the displayed video.

youtube_embed_2

After you select your options, copy the embed code and then go to your WordPress post or page and make sure you are using the Text editor (this will not work with the Visual editor). Select the point where you want to insert the video and paste in the embed code. It should look something like this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/vpUwwjUcZY8" 
frameborder="0" allowfullscreen></iframe>

In order to have WordPress recognize the iframe and display it properly, you will need to add a span around the iframe. The span should look like:

<span style="text-align: center; display: block;">
<iframe width="560" height="315" src="https://www.youtube.com/embed/vpUwwjUcZY8" 
frameborder="0" allowfullscreen></iframe>
</span>

This span will display the YouTube video centered. If you would like it to be left aligned, replace “text-align: center” with “text-align: left”. Below is how this example looks:

Vimeo

In Vimeo after clicking on Embed, select the Show Options and select the options that you would like to use. Once the options have been selected, select the iframe code and copy it. In WordPress use the Text tab of the editor (do not use the Visual tab) and paste the code where appropriate.

vimeo_embed_1

For Vimeo you will also need to use a span. Place the span around the iframe, as was done for YouTube.

<span style="text-align: center; display: block;">
<iframe src="https://player.vimeo.com/video/1472951" width="500" height="375" 
frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</span>

This is how the Vimeo will look:

Conclusion

Hopefully this helped give you some options for embedding videos on your WordPress site. Doing a basic video embed is very easy to do, but the more customized embed does involve either the use of plugins or HTML code. It’s not complex code, but it is a little more effort.

Generally when embedding YouTube videos I use the very simple URL method. However, Vimeo doesn’t come across quite as nicely by default so I generally customize it by using HTML. It only takes a few more seconds and yields a much more polished result.

Share Button

2 thoughts on “Embedding YouTube & Vimeo Videos in WordPress

  1. Hi and thanks for the tutorial.
    I have one question tho. Vimeo videos I embed are always aligned center. Is there a way to change that (in my case, I’d like to align them left and if you know of a way to make this automatic, even better.)?

    Best,

    Clo

    • Clo,

      If in the span element you use “text-align: left” instead of “text-align: center” that will align them on the left.

Leave a Reply

Your email address will not be published. Required fields are marked *