Friday, August 31, 2007

LiveJournal embed tag extra whitespace - a solution

Whenever I embed a video on LiveJournal, I put below it a link to the original webpage so that the reader can launch it in a background tab and continue to scroll down on his LJ Friends page. But when LJ recently created a custom lj-embed tag that wraps the video in an iframe, it also added some unnecessary whitespace at the bottom of the iframe. So there would be a couple of extra blank lines b/w the embed and my caption link.

Luckily I know CSS, so I did a workaround: Use relative positioning to lift up the caption and any content following the caption. Here's the code:

<lj-embed>
..embed code for YouTube video ...
<div style="position:relative; top:-32px;"><a href="http://youtube.com/watch?v=blahblah">A cool video</a></div>
</lj-embed>
<div style="position:relative; top:-32px;" >..rest of my blog post...blahblah.....end of blog post</div>


The style attribute value for "A cool video" moves it upwards by the specified no. of units relative to where it would go by default. -32px worked just right for me. Since this line is moved up, you must also raise subsequent content, otherwise there will be a gap after the caption. This is easily accomplished by wrapping all content after the caption in a div with the same relative position values as the caption itself.

1 comment:

Pierre said...

I know it's an old post/tip but thanks. This little quirk annoyed me for quite awhile.