Positioning Video Within a Blog Post
A question was received this morning asking how to position a video in a blog post. I thought you might be interested in the answer.
Much depends on what blog publishing software you're using, the the video code itself, and perhaps even the CSS definitions that apply to the page.
But try these. They are generic solutions that might work.
To float to the right edge of the post (not the right edge of the page unless the post itself extends that far) with the blog text flowing by the left side of the video:
<div style="float:right;"> -video code here- </div>
To float to the left edge of the post (not the left edge of the page unless the post itself extends that far) with the blog text flowing by the right side of the video:
<div style="float:left;"> -video code here- </div>
To horizontally center the video in the post (generally used for text, but might work on a video):
<div style="text-align:center;"> -video code here- </div>
If that doesn't work to center, try this:
<center> -video code here- </center>
And if that doesn't work, this may work to center the video:
<table align="center"><tr><td> -video code here- </td></tr></table>
Use your choice of the above in the blog post. I assume your blogging software allows you to insert HTML code. Example blog post:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum velit condimentum augue blandit tincidunt. Pellentesque habitant morbi tristique senectus et netus. <div style="float:right;"> -video code here- </div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum velit condimentum augue blandit tincidunt. Pellentesque habitant morbi tristique senectus et netus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum velit condimentum augue blandit tincidunt. Pellentesque habitant morbi tristique senectus et netus.
if using style="float:right;" or style="float:left;" and the video extends past the bottom of the blog post, put either
<div style="clear:right;"></div>
or
<div style="clear:left;"></div>
below the last text of the blog post. The clear property cancels the float.
References:
Will Bontrager
