The case of the floating videos

You might have noticed that I’ve had a bit of an issue lately with floating videos. Err, hold on, I’ll clarify that a bit. You have noticed that when I’ve inserted a YouTube or other video in a post, it’s shoved itself over to the left, and any text after the video was squidged alongside it, rather like this:

Floaty

Now quite apart from looking untidy, it makes the text a bit hard to read. I’m pretty sure this didn’t happen before, so I suspected some change in how videos are inserted. I use the WordPress automagic method rather than any shortcodes or plugins – I just paste in the URL of the video, and WordPress does the rest.

Well, having tried to get round this by inserting

<br>

tags, and finding that the visual editor did its usual friendly job of eating them, I did a bit of digging. Looking at the source of a page revealed that the video was in an iframe. That led me to look at my CSS, to remind myself what I was doing with those. Well, you might recall that I used to insert Amazon product details in those blocks with price details. Those were indeed iframes, and I had this bit of CSS to make them line up on the left of the text:


iframe {
 float: left;
 margin-right: 5px;
 }

My first thought was to set up a more specific bit of CSS for the YouTube iframes, which seemed to have a convenient class:


iframe.youtube-player {
 float:none;
 margin: 5px, auto;
 }

This would cancel the left alignment, and center the video. Much better. Then I realised that as I’d replaced all the Amazon iframes with images, maybe I didn’t need a specific tag just for YouTube after all.

So, I changed the CSS to this:


iframe {
 margin: 5px, auto;
 }

So now videos appear more like this:

Unfloaty

If I ever need more specific iframe styling, I can add it later, but for now this is all I need.