Twitter oEmbeds are not responsive – The little things that bug me

If you have a website using WordPress you should be excited about the new 3.4 release which introduces a whole bunch of new features. For a brief look check out the announcement or you can get an in-depth look at all the newness in the Codex article for the release.

Twitter oEmbeds are here!

One of the many new features is the ability to use oEmbed to add Tweets to your posts. All you have to do is grab the URL to a tweet, for example https://twitter.com/mor10/status/212999553023090688, and paste it into the editor. WordPress finds the URL, figures out it’s from Twitter, and embeds a nice active Tweet window in the post, just like the one you see above. Very cool. Almost.

New technology hampered by old thinking

I have a serious issue with the Twitter oEmbed: Inspecting the code you’ll see the widget comes with a small inline style call:

style="width:500px!important"

This small and unnecessary piece of code makes the Twitter oEmbed awful to work with. As you see from the grab at the very top of the post, the oEmbedded tweet is not responsive. That’s because the width is hardcoded – something that should never happen, especially not inline. What’s worse is that infernal “!important” at the end of the offending piece of inline style code. That !important makes it impossible to use a stylesheet to override the width and make the box responsive.

The Solution (that you can’t apply)

The solution to this problem – one that must be implemented by either Twitter or WordPress (at present I’m not sure where that piece of code is originating) is to change the style code to say:

style="max-width:500px!important"

Oh, and don’t even get me started on the clear:both!important; call. WTF.

5 thoughts on “Twitter oEmbeds are not responsive – The little things that bug me

  1. Yesterday I tried the new wordpress oembed function for twitter and it broke my responsive (Twenty Twelve beta) layout. I’ve been scouring the net and looking for the code to fix this but to no avail πŸ™

    Please share any solution on how to fix this problem if you discover something useful

  2. I had exactly the same problem and I don’t understand why Twitter did it that way.

    However I found a solution, it’s not ideal but it does work and until someone can think of a better way it is what I will use.

    You can read it here http://sanerdesign.com/2012/07/twitter-embed-width-issue-wordpress-fix/

    Basically a tiny js script that waits 100ms after the page has loaded and removes the inline style. I have it set up for WordPress and it works.

    Hope this helps until Twitter fix their wicked ways πŸ™‚

  3. Hey there !
    Been playing a lot recently with the now famous

    element, element[style]{
    overide inline style
    }

    And now aligned with your solution, we have a js free fix agains the evil inline !important of twitter embed :

    div[id|=twitter][style],div[id|=twitter]{
    max-width:100%!important;
    }

    Cheers for this post, that was my missing link !

Comments are closed.