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:

class="alignleft"

Register To Get Full Access & Support

Also get instant access to all premium content & downloads.

Members of WP Sites get:

  • Answers to questions relating to code & tutorials
  • Support for installation & modification of code
  • Solutions & advice given to you directly via email
  • Cancel subscription at any time, no questions asked

$65 $27/month (Early Bird Rate Limited Time Only)

1 Start Here: Enter Your Details
2 Submit PayPal Payment

Comments

  1. Laura says

    Hi there,

    I was looking for text next to embedded video. Found it and….tadaaa it does not work!

    What am i doing wrong please help me. I am going out of my mind here.

    And this is what is typed in the text tab in html:
    <div style="float:left;margin:0 10 px 5px 0;
    “Hallo, aangenaam kennis te maken.
    Ik ben Sir Short van Short Visuals.
    Ik leid je graag rond op deze website
    waar ik je alle mogelijkheden laat zien
    die Short Visuals jou te bieden heeft.”

  2. Audrey says

    Hey, thank you so much! This code is what I needed… but do you know any reason why I embed two videos, align it on the right intending for the text to wrap on the left side of the screen, it just leaves a blank space above the text to the left of the first video, so the text does not begin until the second video on the left? As in have you ever tried this with two videos and had issues? I could just try to find a code to make it two different columns, one with the text on the left and one with the videos on the right, but in the case you know the solution to this question thought I’d ask! Either way, thanks for providing me with the code to begin with!

  3. Vernon says

    Followed you advice and thanks it worked but its not plain sailing when your head is throbbing from thinking so maybe to show it like this and people can just copy the text and delete the content and change the video address

    Text goes here, then it will be wrapped around your video

  4. Milena says

    Hi, thanks for all your tutorials, but I still cannot figure out how to properly wrap text around an image. I have done all that you have described and still no progress. Here is the page I am talking about (it’s in Bulgarian):

    I just cannot get this text to wrap around the images!!! Here is the code for the first image:

    Am I missing something?

    • Brad Dalton says

      Around an image or video?

      Easiest way is to embed the video or image into a new post draft and align it left or right so the text wraps around then copy and paste all the HTML from your text editor into wherever you want it to display.

  5. Nilsa says

    Hi, I have a question, by the way your videos are great. I watched how to wrap around a video. I tried it and it worked great, however the writing i have on the side of the video are to close to the video. I would like to also separate the paragraphs a bit. It’s all showing bunched up and to close to the video. What would be the best margin for this and pxl as well ??? I have the video on the left. THANK YOU

    • Brad Dalton says

      Impossible to say unless I saw your website however I would post this question on the Studio Press Community forums and I know you will receive the solution there if you post a link to your site.

      This way someone can inspect the elements using Firebug to determine exactly what CSS code you need to fix the problem.

Leave a Reply