How to embed a video in a WordPress blog post

Last updated on August 13th, 2014 by Robert Abela. Filed under WordPress Security Tutorials & Tips

Embedding video and audio files is a popular way for website or blog owners to go beyond simply providing written content for their visitors. A content and media rich blog is the secret formula for a successful blog. Whether you are a producer, film maker or simply enjoy watching videos, from time to time you might need to embed a video in one of your blog posts.

In this blog post you will find all the information you need on how to embed a video. Websites such as YouTube and Vimeo are very popular and in a couple of minutes you too will be able to embed a video in your WordPress blog thanks to our step-by-step tutorial.

Format Video Size, Video Options and Get the Video Embedding code

First you will need to search a website such as YouTube and decide which video you would like to embed. When you find your video, click on the Share button and then on the Embed button. Both buttons are highlighted in red as 1 and 2 respectively in the screen shot below.

video embedding options on YouTube

You might also need to change the default size of the video preview. This is an important setting to consider in order to obtain a professional looking blog. Make sure that the embedded video preview is not wider than the blog post column. Otherwise, this causes the video to overlap on the sidebar and visitors would not be able to see all the content. This is definitely undesirable and makes the blog look unprofessional. Have a look at the example in the screen shot below.

Wide video embedded on WordPress blog post

You have the option to choose a predefined video preview size or specify the size yourself. These options are highlighted in red with the numbers 3 and 4 respectively. in the first screenshot Be careful when choosing the option to specify the size yourself. If you do not maintain the aspect ratio the video will appear as a stretched image.

Embedding the video in the blog post

After setting the video options as desired, it is time to embed the video you have chosen. Simply navigate to your WordPress administrator panel (/wp-admin section) and while editing a blog post switch to the HTML editor by clicking on the HTML button highlighted in red in the below Screenshot.

WordPress blog post HTML edit view

Paste the highlighted code marked as 5 in red in Screenshot 1 in the HTML edit view shown above.

Aligning the video in the blog post

You can also use the <center><left> or <right> HTML attributes to centre, left or right justify the video in the blog post. Justification positions the video in the centre or on the left or right side of the blog post.

Remember that visual is very important for your readers. If you are embedding more than one video or image, use the same justification (or position) for all. Have a look at the examples below:

Centre justification

<center>
[VIDEO CODE COPIED FROM VIDEO WEBSITE]
</center>

center justify embedded video

Left justification

<left>
[VIDEO CODE COPIED FROM VIDEO WEBSITE]
</left>

left justify embedded video

Right justification

<right>
[VIDEO CODE COPIED FROM VIDEO WEBSITE]
</right>

right justify embedded video

Wrapping text around an embedded video

If you embed a left or right justified video on a WordPress blog post and you would like to embed text around it, refer to the section ‘Placement of the advert in the blog post’ in the blog post How to add Amazon Affiliate Advert Code to WordPress Blog. The same method is always used to embed a static image, video preview or any other object and wrap text around it, which is by creating an HTML table.

Embedding a Vimeo Video in a blog post

Just like YouTube, Vimeo is another well known video sharing website. Up till now, we have used screen shots taken from YouTube. Embedding a video from Vimeo requires the exact same procedure. The only difference between Vimeo and YouTube when it comes to embedding a video in a blog post are the positioning of the option buttons. You can use the screen shot below as a reference.

video embedding options on vimeo video sharing website

WordPress Hosting, Firewall and Backup

This Website is:

6 comments

Jeff 06/08/2012

Hey Good post and what SHOULD work, and what people have been doing to the best of my knowledge for a while now. However myself and others as well now appear to be having issues with this regarding youtube. I am assuming that one other person I know with this issue has a 3.4 wp or above version, as they created a new blog and I have 3.3.2 wp currently.

Any info on why this would be or what to do different?

John Bonello 06/08/2012

Hi Jeff,

I haven’t seen any problematic cases yet. We have 3.4 and all is working fine. If you are willing to give me access to check it out, drop me an email on john@wpwhitesecurity.com. Do not post any credentials in this comments area.

Looking forward to hearing from you.

JT 10/08/2012

Yep, just upgraded WP to 3.4.1 and I can’t embed videos.

John Bonello 11/08/2012

I haven’t encountered any problems yet. What is happening, are you getting any errors or some code is being changed automatically by WordPress?

ray 09/08/2012

GREAT POST… BUT, what about having MULTIPLE video (youtube) on ONE line.
You should be able to have at least FOUR youtube video on ONE line, and have it fit a WordPRess (FullWidth) page… It used to work with a HTML TABLEs coding.. But with the WordPress 3.4.1 Only the first video appears, everything else is BLANK..
The correct layout is SHOWN BUT no VIDEOs ???
Hope you can help
Ray

John Bonello 11/08/2012

Hi Ray,

I would recommend you to use tables and fit the videos in the tables. Like this it makes it easier even from the formatting point of view. If you do not manage, drop me an email on john@wpwhitesecurity.com and we will look into it 🙂

Leave a Reply

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