Wrap text round video

By Chris Gaskell

There are a few way you can wrap text around the video using CSS. You can apply a class to your video or use a div tag for the video’s container. Then apply a float property in your style sheet.

Inline Style:

<embed src="http://yoursite.com/yourvideo.mov" width="480" height="376" pluginspage="http://www.apple.com/quicktime/download/" autoplay="false" CLASS="CLASSNAME"></embed>

I find that wrapping my video in a div tag usally works better in all browsers:

<div class="classname">
<embed src="http://yoursite.com/yourvideo.mov" width="480" height="376" pluginspage="http://www.apple.com/quicktime/download/" autoplay="false"></embed>
</div>

If you apply a float property of left in you style sheet the text will wrap around your video on the right side:

.classname { float:left; }

4 Responses to “Wrap text round video”

  1. Kathy Says:

    Hi Chris:

    You are the only one I could find that answered the question about wrapping text around a video.

    I don’t know how to use what you have here for my wordpress video:

    [swfobj src="http://fastcashblogging.com/wp-content/uploads/2008/08/post200.swf" width="620" height="550" class="flashobj" align="right" allowfullscreen="true" required_player_version="6"]

    Can you help me with this?

    Thx,

    Kathy

  2. scott Says:

    You are one of the few that talks about wrapping text around a youtube video in WordPress. THANKS!!!!!!

    I’m still a little confused by your post though. I’ve tried a bunch of combinations using the code you gave but still can’t get it to work. I’m trying to embed the video, push it over to the righthand side, then have words wrap on the left side. You said

    If you apply a float property of left in you style sheet the text will wrap around your video on the right side:

    .classname { float:left; }”

    If my video link looked like this for example (see below) what would the modified version look like if added the proper code? ANY thoughts would be greatly appreciated!!

  3. Oliver Says:

    Thanks for your tip. I did this with an in-line style, and added a little buffer around the video. Should work as-is without needing to adjust the css/style-sheet:

  4. tim Says:

    how do you wrap text (and insert) a video thumbnail in dreamweaver and then have it expand when played.

Leave a Reply