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.
Thanks for the tip! I can use it for my wedding videos now!
You should get some search engine traffic from this post.
Thanks for the tip.I’ll try it
I don’t mean to place urls in my response but for anyone using xhtml for their website before you go off and embed youtube video code into your site you need to go here http://www.tools4noobs.com/online_tools/ and use their tool to convert html youtube code into valid xhtml code. If you are using xhtml and you dont use this converter first you will never be able to validate your website at w3.org, which should be a big goal for every webmaster.
P.S. You can modify the code generated by that site and eliminate their link that gets placed at the bottom of the video. You can do this by only coping the video link part of the code which should look like this
P.P.S. I guess I cant place code in my comments. Sorry I tried to show an example.
I used exactly the text you used in my HTML editor. I flicjed back to the visual version of the edititor and hey presto, you were right. Video left, text on the right. Saved it and the editor changed it all back, although the code still had the left align attributes to it.
HEEEEEEEEEEEEEELLLLLLLLLLLLLLPPP
@Charlie – Don’t flip back to visual. Stay in html.
Thanks allot for this, didn’t even know you could do this.
o and btw WordPress sometimes posts html code if you just type normal text ( no code ). I just use normal html tag to make sure this does not happen. Once i posted a post with the visual tab and i didnt show up at all in IE. Then I just copied the text to html tab and everything worked fine.
Thanks for this, just what I was looking for!
Thanks a lot mate…its been a great help….
[...] How to Wrap Text Around a Video [...]
Hey thank you so much.. I have no idea what I am doing but I did exactly what you said and it worked like a charm! woohooo!
Thanks so much for your help! I’ve been looking for this coding for ages and you made it simple and easy!
Thank you so much I was trying to figure that out and this made it work perfectly!
Works!!!
Smart man
Hi, your instruction helped me enrich my website with video. Could you please write a post or tell me how to do rollover images in a WordPress blog? I couldn’t find a plug in so maybe there’s another way. I’m more of a script kitty (know it’s really spelled differently). Ann Powers
Ann, I’m not a script kiddie or kitty, either one. Looks like it’s just you and your buddy Google on this one.
Thank you so much i looked for 3 days for this info once again thank u so much GREAT JOB
sorry, it didnt work with wordpress.org blog software that i host myself.
ive been tinkering all night with no luck so far.
If it’s not working, there are three probable causes:
1: Your blog theme is interfering.
2: You flipped back from the html tab to the visual tab, causing WordPress to “clean up” your code (i.e., ruin it). Stay in the html tab the whole time.
3: Your code is wrong.
Thanks for your response. I checked all 3, to no avail. I was thinking too that maybe it was the theme, but Ive tried a few differrent themes that have no side columns to interfere with the code.
I copied and pasted your exact code and stuck some text inside the DIV tags (but not inside the object tags).
I also put text before and after the DIV tags.
The results for all of it was the text shows below or above the video.
I want to pull my hair out.
(Hey is that what happened to you? LOL jk)
I initially was using Firefox, but switched to IE. No diff.
I stayed in the html tab the whole time since I read the other day that switching back to the visual one will ruin code.
I have to say WordPress works well for the most part, very few flaws. This one really bothers me though, since Im working on meaty horror movie list with video and summaries of movies, and the text wrap around would be the perfect format for this.
In that case, consider getting a theme designed to work with especially with video. It will have built-in styles for you to take advantage of. You’ll work with your videos in a different way, probably by supplying the YouTube (or similar) page URL to a custom field.
Good article. When I add the youtube code the WordPress TinyMCE won’t save my embed code? Stripes it out when saving?
Ideas?
Gary, if you’re seeing the TinyMCE toolbar, you’re not using the HTML tab. You MUST use the HTML tab to do this. Reread the instructions in the post carefully, and you’ll see that’s what it says.
I’ve used the editor on two other blogs I have. This is the only one that’s stripping out the enbed code? I’ve been using the HTML editor option. I’ve saved my work while in the HTML mode and in Standard mode. Upon page refresh the embed code disappears (as if I never entered it)?
Is there a setting on the php file that should be enabled?
gs
Gary, it could be plugin or your theme. Deactivating plugins and switching themes are how you would find out. Also make sure your blog and all plugins are upgraded to their latest versions.
Also, you may have to remain in the HTML tab the entire time and not switch to visual at all.
Thanks man. It's so simple when you really think about it. CSS is something I am getting better at. Thanks for the information once again!
That was awsome and easy!!! THANK YOU so much. Do you know how I can make that txt be centered to the right of that video too? That would be perfect.
Another question, regarding my previous one. I got the txt to wrap around the video using your div html codes. I need to put a group of videos in a column format, like under the “MORE FROM” box on youtube when you play a video. That's exactly what I need to do on my site. Videos, one on top of the other aligned to the left, w one or two lines of txt centered w the video, and aligned to the right of each video. Hope you can help. Thanks.
Kyle, if you look into learning about floated <divs> in CSS, you'll find out how to work out a situation like that. It starts to get a little complicated, but it's all based on the same properties used to float a single video like in this post. When these floated items are held inside a narrow-width container, they just each go row by row like a column.
THANK YOU!!! I'll def. look into it.
many thanks – your advice gave me the answer I needed – much appreciated.
You're welcome! Glad it helped you. Please tell others about it, too.
Thank you for the help. It was very helpful!
Quick and dirty. Worked a charm – thanks, mate!
I know you posted this over a year ago, but it's still a great tutorial and helped me get my site up and running with video wrap. Thanks so much!
Thank you. That in itself is a great blogging lesson: over a year, and I
still get comments of gratitude on this post every single week! I'm thrilled
to be able to help you guys.
Thanks man – just what i needed !
I've been searching for this code for hours and hours and kept coming up with nothing. Everyone else's codes were either too complicated, didn't work, or a mixture of both. Haha.
Thank you so much. Your rock:)
Thanks a million, This was super helpful
Excellent! thank you for this! Being an HTML novice, I spent hours last night trying to figure out how to do this….once I found your solution I had it up an running in minutes. You're awesome!
Sweet, You had what I was looking for my friend thanks
Dude you are awesome, I was looking for this answer all over and you had it. Believe it or not I am internet expert and still a relative newbie on WordPress, so thank you.
Check out the sites talksportsPhilly.com and talksportsUSA.com, i'd like your opinion.
You are welcome, glad it was helpful! Giving my opinion on blogs (and
recommendations) is what people pay me
for<http://remarkablogger.com/blog-consulting>.
Um no offense, But fortune 500 companies come to me for answers most of the time, so if you are that stuck up, don't bother, LOL
Sorry you feel you have to interpret my separation of free content vs. paid
services as being “stuck up.”
You are welcome, glad it was helpful! Giving my opinion on blogs (and
recommendations) is what people pay me
for<http://remarkablogger.com/blog-consulting>.
Thanks for posting this! I updated all of my blog posts with videos in them.
Awesome, glad you found this information helpful.
Does not work in Internet Explorer 64-bit.
Does not work in Internet Explorer 64-bit.
[...] of playing around with obvious methods seems to satisfy your requirements. However, thanks to remarkableblogger the solution is super easy. (It just takes persistence using the search engines, yes your answer is [...]