Embed YouTube Video into WordPress Post

Posted on 29. Jun, 2013 by in Develop

This recently came up with a client on her site.  She wanted to include a recent video into a WordPress post on her website.

Normally when you create a post, you enter your text into the post area. If you look above the input area and the tool bar, you will see two tabs.  One is labeled “Visual” and the second one is called “Text”.  Nine times out of ten, you stay on the Visual tab.  For this, you will enter the embed code over on the Text tab.

embeddingVideo1

First you need to copy the embed code from your video.  To do this, open the YouTube video.  I like to do this in another browser window from where I am editing my post.

Right mouse click on the video.  You should see an option to “Copy embed code”.

When you press the option to copy the code, it will copied to your clipboard.  So then it’s ready to paste into your post.

embeddingVideo

Now over in your post, go to where you want to post the video, usually I do this under some introductory text.

Click on the Text tab, and do a paste (Ctrl-V) or Edit-Paste. You will see a line or two of code that starts with “iframe src=”https://www.youtube.com/embed/——“.

If you do the paste in the Visual side of your post, WordPress thinks that you are just typing words and the code will not work, it will just look like you typed in garbage into your post.

If you pasted it correctly into the Text side of your post, it will show up like a yellow square when editing your post.  But then display properly as a video on the website when someone reads your post.

embeddingVideo2

Here’s an example video.  Notice how nicely it fits on your post, and has all the video controls for the person to start, pause, and stop the video.  If the video is a little too wide, you can adjust the code.

My video code said to be — height=”360″ width=”640″ — and that was too wide for the layout I am using.  So I changed the width=640 to be width=540.  At first I thought this would ruin the proportion, but it looks fine 360 tall and 540 wide and fits to much better now.

Tags: , ,

Leave a Reply