Digital Nature

How to center a (you tube) video snipet in WordPress ?

As straightforward as the wp editor is, some things just don’t fit right. One of them is the embedding of a video snippet, let’s say from YouTube. While adding a video make your content much more worthy and live, while the process is now easy, it’s not so easy to actually center an embedded video.

HTML coders would go straight to the HTML view and hardcode the tag, but what can be done for the rest of us ?
Luckily, there’s a very simple fix that allow to center any embedded object: video, flash content, flash game aso…

We all are used to click the “center” text  button on the tools bar. For sure, this does not work for embedded objects.

Once the video is in your post (you can insert the html code, or use a plugin – I do favour the html code option),

Just make sure you are in the html tab, and locate the <embed…> code.
Just before it, add a centered div, that is :

<div style="text-align:center;">

then locate the end of the embed code, and close the div:

</div>

You can then safely switch to the Visual tab and enjoy the centered video box.
This will work for whatever object you’d like to center…
or right align : just use text-align:right instead of center !

Once you’ll hace it done a few times, it will come easily and you’ll be able to impress your friends with your newly acquired “html coder” skills
You are now able to center a video like a pro.

Edit: In answer to Jim, it is also possible (should you have enough width) to align the video to the left of the content, and let the text flow on its right.
It’s very similar to the center trick: put a div around the embed code, that reads
<div style="float:left;">
and don’t forget to close it after the embed :
</div>
Then the text that follow the video will be in the free space on the right.
Next, if you want to force another paragraph below the video, you can exit of the flow by inserting a
<br style="clear:both"> that will force a reset of the css float rule.

Let me know how this works for you !