Over the past several months we have been exploring the benefits and limitations of responsive design – creating Web sites that adapt the layout to the viewing environment.
Responsive design enables users of different devices and browsers to access one source of content that is easy to read and navigate with little, if any, resizing, panning or scrolling.
During our research we came across quite a few complaints from developers who discover that Twitter embeds (using the oembed format) in WordPress posts are not responsive. We also discovered a few attempts to get around the problem, but none that were ideal from our perspective.
The Problem
Twitter’s oembed output includes HTML that is transformed and rendered with JavaScript to include additional elements and inline styles that are difficult to override, thus making it a fixed-width element. The width is initially defined on the untransformed HTML of the <blockquote> element and used by the associated JavaScript to define the width of the twitter-tweet-rendered container.
Twitter Embed before JavaScript is processed
<blockquote class="twitter-tweet" width="550">...</blockquote>
Twitter Embed after JavaScript is processed
<div id="twitter-widget-0" class="twitter-tweet-rendered" lang="en" style=";width:550px!important">...</div>
The Solution
We need to capture the HTML and remove the width attribute from the <blockquote> tag before handing it off to the browser. This can be accomplished by using the oembed_dataparse filter hook along with the PHP function str_ireplace() . We wrote a function that takes care of this process. All you need to do is add the following code to your WordPress theme’s functions.php file:
function twitter_oembed_hotfix( $html, $data, $url ) {
// remove the blockquote width attribute and value from the twitter oembed html response and return the filtered version
$html = str_ireplace( '<blockquote class="twitter-tweet" width="550">', '<blockquote class="twitter-tweet">', $html );
return $html;
}
add_filter( 'oembed_dataparse', 'twitter_oembed_hotfix' );
Caveats
First, after Twitter’s JavaScript has processed the HTML, there will be a style attribute on the tweet container that has no values. This does not appear to cause any validation issues but it is something worth noting.
Second, the maximum width is still fixed at 500px because of style attributes that are bound to the HTML by Twitter’s JavaScript.
Third, if Twitter changes the HTML output from the oembed request, then the search and replace that is done within our function will need to be updated as well.
Conclusion
It is our opinion that content providers – Twitter in this case – should better balance the need for branding with flexibility that enables select content to be easily integrated with other sites. We hope the WordPress community finds this hotfix for Twitter embeds useful. We welcome comments or questions.