How To Remove The Border From Facebook and YouTube Widgets

By , 21 April 2011

How To Remove The Border From Facebook and YouTube Widgets

Facebook and YouTube have neat little widgets to help your website visitors easily subscribe to your videos and like your facebook page. The only problem is they both went ahead and put dog ugly borders around their widgets which you can't style using css because it's all in an iframe. Fortunately, we can still style our own content and here is a little trick you can use to hide those pesky borders.

It works by simply tucking the iframe under a div on your site. The markup and css looks like this:

How To Remove The Border From Facebook and YouTube Widgets
<div style="overflow: hidden; width: 248px; height: 450px;">
  <iframe src="http://www.facebook.com/plugins/likebox.php?href=xxx"/>
          scrolling="no" frameborder="0" allowTransparency="true" 
          style="margin: -1px; width: 250px; height: 475px;">
  </iframe>
</div>

Do the maths on those widths and margins, and you'll see that the iframe is two pixels wider than the div with a -1 pixel margin on each side. Goodbye borders! Note the wrapping div is 25px shorter than the iframe to hide the Facebook Like Box developer link. You could always change that if you wanted.

Same deal with the YouTube widget, just experiment with the dimensions until you're happy.

Hope that helps.

About Roger Keays

How To Remove The Border From Facebook and YouTube Widgets

I guess I'd call myself a problem solver. Either that, or I'm some sort of organic machine designed to convert oxygen into carbon dioxide. You could go either way on that. I'm into languages and stuff. I wrote a book. It's okay, I guess. What else? I like reading, swimming, eating, and playing music. Satisfied? Sheesh.

Leave a Comment

Please visit https://rogerkeays.com/blog/how-to-remove-the-border-from-facebook-and-youtube-widgets to add your comments.

Comment posted by: Fabio, 4 years ago

Thank You very very very much!