How to Wrap Text Around A Video

In my blog post on How to Embed Video in a Blog Post, Scott asked in the comments if I could show how to get text to wrap around a video. If you want to learn how to embed video first, you should go check out that post.

It is totally possible to do this, but it requires a little HTML coding to make it work. When you paste the embed codes for a video into the WordPress write screen, you have be using the HTML tab, not the Visual tab.

When you want your post text to wrap around the video, place the video embed code inside of a DIV tag. The HTML DIV tag creates a box to contain the video. However, the “box” doesn’t have any style properties of its own, such as floating to the left so text wraps around it. You have give it those properties with CSS code.

CSS is Cascading Style Sheets. You can put a little CSS code right in the HTML DIV tag, as in the following code example:

<div style="float:left;margin:0 10px 5px 0;"><object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/HSZCk2EIQL0&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/HSZCk2EIQL0&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object></div>

The highlighted parts are what you would have to type in around the pasted embed code. The code you see there is exactly the code that is making the video in this post float to the left so that the text wraps around it to the right.

I know that it’s certainly possible to do this with external stylesheets, but anyone who knows how to do that doesn’t need this help in the first place. I’m just trying to make something that’s normally hard for people a little easier. I’m not going to get into an argument with any code purists over this, so don’t bother.

Having said that, I also believe that if you’re going to be in the blogging game for a long time, it’s a good idea to learn this code stuff (especially if you have more time than money). Life will be easier.

In the video above, I talk about the book-only version of WordPress SEO Secrets, which I have created by popular request.

PS – Sometimes WordPress likes to change your HTML code for you when you switch from the HTML tab to the Visual tab. It doesn’t happen to me, but I noticed it happening on a client’s Mac running Firefox. You’ll know when it happens, because you don’t see your video! So if this happens to you, just don’t switch to the Visual tab when when you’re writing the post. Stay in the HTML tab.

PPS – You can use this same technique to “wrap” and float any block of code.