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.
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.
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”.
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.
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.
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.
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.
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.
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.
In YouTube to get the iFrame code, after you click on “Share” you will need to click on “Embed”.
After you click on Embed you will be provided with some extra options including the ability to set the size of the displayed video.
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="http://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="http://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:
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.
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="http://player.vimeo.com/video/1472951" width="500" height="375" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> </span>
This is how the Vimeo will look:
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.