Open Source Tutorials - Open Source Training
Open source training & tutorials from experienced, passionate people
chrome icon firefox icon ie icon opera icon safari icon Sings in these Browsers
A- A A+

By A Web Design

pdf icons

Embedding You Tube Video(s) Into WordPress Post(s)

Using A YouTube URL And YouTube Embeddable Code

The easiest way to add video to a WordPress page is to do it via YouTube. To be able to do you will need a YouTube account. Once you have a You Tube account, upload your videos to your You Tube account. Subsequently, You Tube will deliver these videos to your WordPress posts - on demand.

Once your videos are uploaded, Open your You Tube account in your Browser. Select the appropriate video you wish to display within your WordPress Blog Post, then copy the URL of the You Tube video and its associated Embed code provided by You Tube as shown in Diagram 1.

diagram1.png
Diagram 1

To embed this video into a post(s) in WordPress 3.X.X login to WordPress as administrator, by simply entering the url_of_your_website/wp-admin in your Browser. Enter the appropriate username and password {which was provided while installing Wordpress} and then click on Log In as shown in Diagram 2.

diagram2.png
Diagram 2

After logging in as WordPress Admin, the WordPress dashboard page opens as shown in Diagram 3.
The Dashboard provides access to different WordPress functions and features.

diagram3.png
Diagram 3

In the left menu, locate the link Posts. Click Posts. From the drop down menu that appears click on Posts as shown in Diagram 4.

diagram4.png
Diagram 4

Click the Title of the post as shown in Diagram 5 or click Edit to open the post in its editable mode.

diagram5.png
Diagram 5

Embedding The You Tube Video URL :

Once on the post, insert the cursor where you want place the video as shown in Diagram 6.

diagram6.png
Diagram 6

In Visual view, Paste the URL of You Tube Video directly on the post as shown in Diagram 7.

diagram7.png
Diagram 7

On the right hand side publish box, click Update to save the changes made on the post as shown in Diagram 8.

diagram8.png
Diagram 8

In the front end of website, the video has been successfully inserted on the post at the cursor position as shown in Diagram 9.

diagram9.png
Diagram 9

Embedding The You Tube Video Code Snippet In A WordPress Post

You can alternatively use the - embed code - copied from You Tube, which is an HTML code snippet. In the WordPress post editor ensure that you are switched to the HTML editor as shown in Diagram 10.

diagram10.png
Diagram 10

While the editor is in HTML mode, set the cursor where you want the video to be displayed and paste the codespec copied from You Tube to embed the video as shown in Diagram 11.

diagram11.png
Diagram 11

On the right hand side publish box, click Update to save the changes made on the post as shown in Diagram 12.

diagram12.png
Diagram 12

In the front end of website, the video has been successfully inserted on the post at the cursor position as shown in Diagram 13.

diagram14.png
Diagram 13

Center A Video On A WordPress Post

If you want the video to be centered on the post then in visual view, place the cursor where you want the video to be displayed. Click the center alignment button as shown in Diagram 14.

diagram15.png
Diagram 14

The cursor moves to the center of the post as shown in Diagram 15.

diagram16.png
Diagram 15

Click HTML tab, the codespec to align text to center appears as shown in Diagram 16.

diagram17.png
Diagram 16

Replace the space provided between the p tag with the HTML Embed code of video as shown in Diagram 17.

diagram18.png
Diagram 17

On the right hand side publish box, click Update to save the changes made on the post as shown in Diagram 18.

diagram13.png
Diagram 18

As compared to Diagram 13, the video is centered on the post as shown in Diagram 19.

diagram19.png
Diagram 19

OSV Newsletter


Receive HTML?

NOTE: To prevent subscription to the OSV newsletter, uncheck the checkbox above.
Guest Blog for OSV
Free Ebook Download
LinkShare_180x150
Artisteer - DNN Skin Generator
Tapestry Theme - A Tumblog-Style Theme for Wordpress