WordPress Responsive Embeds

The current situation in 2016, 2017...
and a viable implementation, that we use on out BBE Theme, and are happy to share.

 
  In the latest years we've been witnessing a radical change in the way websites are "consumed" - more and more people browse from the bus, from the bathroom, the *whatever* - on their mobile phone. Back in 2006 it was hard to imagine the point where your website analytics would report a 50% visitors from their phone. What the hell would you want to read on that small, low resolution screen? Today things are different - and for every webmaster out there, building responsive web pages is an absolute MUST. You cannot assume a certain screen size, or even a single aspect ratio. Today, as far as images and text, most sites play well on all devices - thanks to the efforts of many great technologies like media queries, HTML frameworks, CSS magic....that's the Responsive Web. On the other side, "multimedia" content, so videos, presentations, music - is fantastic content that sometimes does not have the same treatment. We believe it should, that's why we started testing things out there to see what we can, or we can't do, to solve this situation.  
WordPress has a fantastic built-in feature allowing easy embedding from other sites, based on the oEmbed technology.
It allows bloggers and content editors to insert videos in their posts, just pasting the YouTube URL of the video.
This *ROCKS* and it happens thanks to some non-trivial ideas: when you paste that video URL in the WordPress content editor, WordPress is calling Youtube and getting back some structured data, like the original video size and the recommended HTML embed code. So you don't have to deal with it, ideally. This tool, obviously,  does not guarantee per se that the Theme will be able to totally "get it right" on each and every case, in terms of how the embed will actually look like.
It's the Theme developer's responsibility to make things responsive, let's see it like that.
This sounds totally normal and in-line with the correct idea of separating the "engine" from the "presentation". So what's interesting to see, maybe? Well, most popular WordPress themes don't seem to get it SO right - making embeds work out of the box, but having fixed sizes, be it horizontally or vertically. Yes, because obviously  if you're watching a 16:9 video, shrinking the width, the height should resize appropriately. And if you don't agree, you might leave this article right now.
If you want to figure out how things work, often the best approach is to try to put your hands directly on 'em. At the DopeWP headquarters, we wanted to make sure we would ship our own Theme, BBE. with a good and solid solution for Real Responsive Embeds. So first of all we wanted to see what happens, from an user's standpoint, trying to embed diverse multimedia types inside WordPress - and see if the embed was fully responsive - on different, popular Themes.

How the test was built

On our test WordPress install we created one post for each embed type, covering the most known oEmbed scene. Youtube, Vimeo, SlideShare, Flickr, Instagram....if you lived out of caves in the latest ten years you should know most of these guys for sure. A neat Theme Switcher plugin, "MDC Theme Switcher allows to quickly see what happens with another theme. We've been disabling the oEmbed Cache violently - for administrators - to make sure the oEmbed data wasn't cached. Visiting and taking notes we've been collecting quite a bit of information. While this does not aim to be the ultimate test, nor 1000% accurate, it gives a rough picture of what happens when you try the Themes (vanilla, no setting / fix / plugin / tweak) to display those videos. In case you want to make your own test and check what happens other Themes, you can download the test XML here and import it to your WordPress install right now.  

This table shows the different responsive behaviour of embeds in terms of responsiveness.

Green = Responsive for Width and Height

Yellow = Responsive for Width only - Height is fixed -  or minor responsive quirks going on

Red = Not Responsive at all - or major responsive quirks going on

 
Provider/Theme Avada 4 Divi BBE Customizr Enfold Genesis Sydney Twenty Fifteen Twenty Fourteen Twenty Sixteen
Animoto
CloudUp
CollegeHumor
DailyMotion
Flickr
FunnyorDie
IMGur
Instagram
Kickstarter
MeetUp
MixCloud
PhotoBucket N/A
PollDaddy
Reddit
SlideShare
SmugMug
SoundCloud
SpeakerDeck
Spotify
Ted
Tumblr
Twitter
Videopress N/A
Vimeo
Vine
WordPress TV
YouTube
Writing a quality WordPress Theme means being able to intelligently glue the CSS framework you've chosen, if any, to the WordPress built-in logics. In this case we're talking about BootStrap 3. This fantastic CSS framework does offer a built-in solution for responsive embeds, so it's good to start from that. In search for a solution for our Theme, BBE,  we found a nice blog post by a Norwegian Web Developer, Kristoffer from Lorut.no, where he explains also a bit how things work with oEmbed on the technical side; if you are interested in the details. It is deeply interesting by the way! His solution worked greatly to make video embeds responsive. It didn't take care of music players, so we tried to extend it to help all kind of embeds to behave well. We wanted to eliminate javascript from the game too, so we have only some PHP and some CSS. This code is in BBE 1.3 onwards - to be released in November 2016.  Here's the PHP that we're using:
<?php

///RESPONSIVE VIDEOS HELPER: a modern approach /////////////////////////
// Hook onto 'oembed_dataparse' and get 2 parameters
add_filter( 'oembed_dataparse','responsive_wrap_oembed_dataparse',10,2);
function responsive_wrap_oembed_dataparse( $html, $data ) {
 
 // Verify oembed data (as done in the oEmbed data2html code)
 if ( ! is_object( $data ) || empty( $data->type ) || (!isset($data->width)) || (!isset($data->height)) || ($data->height==0) ) return $html;
 
 // Disable for other types of embed except video and rich
 if ( $data->type != 'video' && $data->type != 'rich' ) return $html;
 
 //a few exceptions: some rich media don't need the treatment and just need some width wrapper
 if (
 (isset($data ->provider_url) && $data ->provider_url=='http://imgur.com') OR
 (isset($data ->provider_url) && $data ->provider_url=='http://www.meetup.com/') 
 )
 return "<div class='embed-responsive-alt'>".$html."</div>";
 
 // Calculate aspect ratio
 $ar = $data->width / $data->height;
 
 // Set the aspect ratio modifier
 $class_name = ( abs($ar-(4/3)) < abs($ar-(16/9)) ? 'embed-responsive-4by3' : 'embed-responsive-16by9');
 
 // Strip width and height from html
 $html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
 
 //if it's a video type, create some inline styling to correct aspect ratio
 if ( $data->type == 'video') $inline_style='style="padding-bottom:'.number_format(((1/$ar)*100),5).'%"'; else $inline_style="";
 
 //check if inline styling would be useless
 if ($class_name=="embed-responsive-16by9" && abs($ar-(16/9))<0.05) $inline_style="";
 if ($class_name=="embed-responsive-4by3" && abs($ar-(4/3))<0.05) $inline_style="";
 
 return '<div class="embed-responsive '.$class_name.'" '.$inline_style.'> '.$html.' </div>';

}


 

  And here's the tiny CSS to add:

.embed-responsive-alt {max-width: 100%; }
.embed-responsive-alt > * {max-width: 100%;}