Top




center youtube video

How To Center YouTube Video URL In WordPress

Centering YouTube videos is a real problem for most bloggers. To make the matters worse, there is a different method for centering embedded videos and for centering a video using the YouTube URL. In the previous post I showed you how to center embeds (both images and videos) and today I will show you how to center YouTube video URL.

A Trick To Center YouTube Video URLs

The simple method of using the center command in your WordPress editor does not work for centering Youtube video URLs. Given that the use of videos is so prevalent, it boggles my mind that the WordPress team has come up with a simple and automatic solution. But I am just venting.

In the text editor, you need to add a specific division code before and after the URL to center it. The code you have to use is:

<div class=”aligncenter”> before the URL
</div> after the URL

But unfortunately, it is not as simple as that. I’ll show you what you have to do in the text editor to make this code work in order to center a YouTube video.

The YouTube video URL does not like to have anything attached to itself. To show you what happens if you try , I simply added the division code in front of the URL and the closing division tag after the URL. When I saved the post, the editor attached the division code to the URL and the video did not show, only the URL showed.

You can see the video URL below. It is just plain text and it does not link anywhere.

http://youtu.be/kZlXWp6vFdE

Image 1. shows what I did initially to center youtube video URL. I added the division tags above and below the video URL.

Centering Youtube Video URL – Image 1

centering youtube video URLImage 2. shows what happens after you save the post. The editor attaches the division tags to the video URL!

Centering Youtube Video URL – Image 2center youtube video

I fiddled with placing of the code some more and the only thing that worked for me and stop the text editor from attaching the code to the video URL was to add the division code, add a space, add the video link, add a space and add the division closing tag. But it was a tricky thing and took me a while to make it work. I’ll show you what I did:

In the text editor:

  • Add division opening tag: <div class=”aligncenter”>
  • Add a space
  • Add this separation tag in its entirety: &nbsp;
  • Add a space
  • Add the division closing tag: </div>

Image 3. shows you how the whole thing looks in the text editor.

Centering Youtube Video URL – Image 3. – Success!!
centered youtube video

 

Centered YouTube Video

 

Note! If you copy¬†<div class=”aligncenter”> from this blog and then paste it into your text editor, make sure that you change the quotation marks to quotation marks typed in from your text editor. I noticed that for some reason, the published quotation marks get “corrupted” and look different than the quotation marks in the text editor. This “corruption” will cause the video stay uncentered.

I must warn you though. The WordPress editor is very finicky and often has a mind of its own. Out of the blue it may change the spacing on you. But if you really want to center the video URL you have to persist. It’s frustrating to say the least!

Now that you know how to center YouTube video when using URLs why don’t you try it on your blog. Let me know is these instructions worked for you. I am really curious.

 

Don't Miss A Thing!  Sign Up For Weekly Newsletter & Updates
online success optin

Enter your name & email and  get a FREE copy of my ebook, Your Online Success Starts Here
 

 

ipropartner ad for header

 

, , , ,

2 Responses to How To Center YouTube Video URL In WordPress

  1. Cliff April 29, 2015 at 11:08 pm #

    Sorry, it didn’t work for me. This is one more frustrating problem to try to solve. I appreciate that you tried, and am glad that it is at least working for you!

    • Dita Irvine April 30, 2015 at 2:50 pm #

      Hi Cliff, I figured out why it did not work for you and I added an update to the post. Here is what I wrote in the post:

      “Note! If you copy

      from this blog and then paste it into your text editor, make sure that you change the quotation marks to quotation marks typed in from your text editor. I noticed that for some reason, the published quotation marks get “corrupted” and look different than the quotation marks in the text editor. This “corruption” will cause the video stay uncentered.”

      Hope that helps.
      Dita Irvine recently posted…How To Customize Bullet Points In WordPressMy Profile