How To Wrap Text Around An Image and Embedded Videos In WordPress

In this tutorial, i’ll explain how to wrap text around an image as well as how to wrap text around a video.

Both solutions involve editing the HTML for your video or image in your WordPress text editor.

Wrap Text Around Video

This requires you wrap your Youtube video embed code in a div which you can see in this Gist which uses inline CSS styles:

Here’s the result using inline style:

wrap text video

In the above example, the Youtube video embed code has been wrapped with:

<div style="float:left;margin-right:15px;">Youtube embed code</div>Text

Simply replace the Youtube embed code text in the above code example with your YouTube embed.

Wrap Video Embed Code in Div Class

Another method is to wrap your video embed code in a new div class and style it from your child themes style.css file using CSS.

The above example wraps the embed code in this div:

<div class="video-text-wrap">Youtube Embed Code</div>Text

Wrap Text Around Image

text wrap

You can simply add the alignleft or alignright class within your images HTML for wrapping text around an image:

WordPress already includes classes with CSS for alignleft and alignright and you simply add the class to your image HTML.

In the above example, the following style has been added within the HTML of the image:


Need More Help?

Join WP Sites to get full access to all tutorials & code.

  • Support for installation & modification of existing PHP code
  • Help with Genesis & StudioPress theme customisation
  • Access all tutorials & code snippets
  • Ask questions in the comments & get answers
  • Education - Request video explaining how the code works and what functions are included

Click Here to Learn More