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.
The @Twitter oEmbed function in #WordPress 3.4 is not responsive. all that's needed is a max-width and it would work.
— Morten @ home (@mor10) June 13, 2012