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.
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
Image 2. shows what happens after you save the post. The editor attaches the division tags to the video URL!
Centering Youtube Video URL – Image 2
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:
- 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
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.