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

This post need updating and will be updated soon.

I’ll explain how to wrap text around an image in a YouTube video at the end of this post and also show you how to wrap text around a video.

This requires you to add a small amount of HTML code to the beginning of your embed video code and a div tag at the end.

Here it is.

<div style=”float:left;margin:0 10px 5px 0;”>   Add this code to the start of your YouTube video code.

</div>   Add this code to the end of your YouTube video embed code

Or you can use this method for wrapping text around an image:

If you want to move the video to the right, just change where it says left in the pink code to right.

You may also want to change the margin which you can do by changing these numbers here margin:0 10px 5px 0

Video on Wrapping text around an image

 

Comments

  1. 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!

  2. 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

    [embedplusvideo height="220" width="350" editlink="http://bit.ly/19LlYI7" standard="http://www.youtube.com/v/tjPE6cfVsYg?fs=1" vars="ytid=tjPE6cfVsYg&width=380&height=220&start=&stop=&rs=w&hd=0&autoplay=0&react=1&chapters=&notes=" id="ep9289" /]
    Text goes here, then it will be wrapped around your video

    • Vernon says

      [embedplusvideo height="220" width="350" editlink="http://bit.ly/19LlYI7" standard="http://www.youtube.com/v/tjPE6cfVsYg?fs=1" vars="ytid=tjPE6cfVsYg&width=380&height=220&start=&stop=&rs=w&hd=0&autoplay=0&react=1&chapters=&notes=" id="ep9289" /] Text goes here, then it will be wrapped around your video

      Something went wrong on the first copy and pasting

  3. 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.

  4. 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.

Ask a Question