It is relatively straightforward to use the visual editor of WordPress or BoldGrid to embed pictures and have text flow
smoothly around the picture to either the right or the left: Insert the picture using ‘Insert Media’ from the column tab, then select the picture in the visual editor, click the ‘edit’ icon, and then click on the icon for picture positioning on the right or left. Centre puts the picture in the centre of the column, but text doesn’t otherwise flow around it. It can be a little fiddly, but it mostly works. You can then drag the image around to reposition it within a paragraph as well.
The problem is, you can’t do the same thing with an embedded video. You can construct a dedicated row and column setup to contain the video but then it’s complicated to get the text to flow around that structure correctly, particularly across different viewing platforms. I’ve done a lot of searching and getting text to wrap around an embedded video using only the visual editor is a “can’t get there from here” situation.
Use style=”float”
Video caption goes here
It is possible to get text to wrap around an embedded video by using the text editor to add a small amount of code instructing the video to ‘float’ with respect to surrounding text. This isn’t news, but finding simple instructions was challenging. The best video I found for how to wrap text around video is from Alexander Higginson. I have embedded a link to his video, and floated it on the right here, to illustrate.
First, insert the video where you’d like it to go by doing ‘Insert Media’ from the column menu (just like for pictures) and then selecting either your uploaded video, or a URL link. Now switch to the text editor and find the code that embeds the video. In this case the code is:
[embed]http://www.youtube.com/watch?v=-UarE2XWgSY[/embed]
You need to surround that code with the instructions to make the video float like this:
<div style="float: right; margin: 0px 0px 0px 10px;">
[embed]http://www.youtube.com/watch?v=-UarE2XWgSY[/embed]
<p class="">Video caption goes here</p>
</div>
The above example has float set to ‘right’, but you can alternatively choose ‘left’. The margins are the blank spaces around the embedded video starting above the video and proceeding clockwise around the video: top, right, bottom, left margins respectively.
Setting the video width
20% width
Setting the width of your floating video is a nice to have and easy to do. Add instructions for example “width: 60%;” to your <div> line style instruction to make the video scale to 60% of the displayed page width. Deliberately setting the video width this way makes your sure your video looks great regardless of viewing platform screen size. Of course you can set the % to be whatever you think appropriate. For example, here’s the code used to float this little video on the right at 20% of the displayable width with some suitable padding around the outside edges: <div style="float: left; margin: 0px 10px 0px 0px; width: 20%;">
The technique can be a little fiddly as well, but it is workable. I used it on my blog post Aquarium daily lighting sequence for example and I like the look of how that turned out.
Caution with embedded video
Setting the width can give unanticipated results with videos that are embedded from an external source such as YouTube, rather than inserted by a direct link to the relevant media file.
Displaying HTML and shortcode instructions without having them executed
Pro tip: getting the code above to display correctly as code in this blog post and not being executed as either shortcode or html instructions for either [] or <> wrapped commands respectively was not straightforward. I managed it by wrapping all characters on a line except the first and last characters in code /code blocks and then wrapped those entire lines again in code /code blocks like this:
<code>[<code>embed]http://www.youtube.com/watch?v=-UarE2XWgSY[/embed</code>]</code>
I tried using escaped html characters or ‘double square brackets’ and those methods sort of worked, but not really.