Responsive embeds – device testing

December 4, 2011

I recently wrote about responsive embeds and how you can scale video and iframes to fit on a responsive website. I have now done tests on some mobile devices, and the results are pretty good for the responsive embed technique; but not so good for the content inside of the embed…

Test setup

Nokia Lumia 800 with Windows Phone 7.5
Sony Ericsson Xperia X10 Mini Pro (SKE17i) Android 2.3.3
Sony Ericsson Xperia X10 Mini Pro (U20i) Android 2.1-update 1
Nokia C7 with Symbian Anna
Samsung GT-S8500 with Bada 1
iPhone 4S with iOS 5.0.1

“Aw fiddlesticks!”

I tested Vimeo, Youtube and Slideshare embeds on all devices and wanted to know: a) Does the responsive embed technique work for mobile devices? b) Does the content inside of the embed work? Let’s look at each device and how it looks.

Nokia Lumia 800

Windows Phone 7.5 is the only non-webkit device in the test. The site renders fine and the responsive embed technique is also working as expected, but videos are not showing up. This is a bit surprising as I was under the assumption that the WP7.5 had HTML5 video support.

UPDATE: Some videos are working on YouTube, but not my original test video. I changed it and the device plays the video.

Sony Ericsson X10 Mini Pro (SK17i)

No problem at all with this device, all working as it should, but after all, this is a device with a new Android build and also one of the first devices with WebGL support.

Sony Ericsson X10 Mini Pro (U20i)

This is the previous version of the X10 Mini Pro. It has a 240px screen and an older android version. Vimeo and Slideshare is working, but not YouTube.

Samsung GT-S8500

Vimeo wins the “best video playback error message of the year”

Not sure how Bada 2 performs, but Bada 1 users will get no videos from embed code. Slideshare is ok tough.

Nokia C7

This is a Symbian Anna device running Webkit, but no touch or swipe support so Slideshare is giving it the “navigate with arrows”-version. Vimeo and YouTube is not working.

iPhone 4S

Not sure why I botherd to included it in the test… Yes it all works.

All results

Device	Vimeo	You Tube	Slide share	Embed technique
Nokia Lumia 800	X	✓	✓	✓
SE X10 Mini Pro (SKE17i)	✓	✓	✓	✓
SE X10 Mini Pro (U20i)	✓	X	✓	✓
Samsung GT-S8500	X	X	✓	✓
Nokia C7	X	X	✓	✓
iPhone 4S	✓	✓	✓	✓

Conclusion

The responsive embed technique is working fine on all tested devices and browsers, but after all, it is a very simple piece of code with just some plain HTML and CSS. The problem is that we do not have control of the stuff that is inside of the iframe. Slideshare works for all device, so this is a video problem. I know from experience that video + mobile devices = asking for trouble and did not expect this to work on the older devices. I am however surprised that Windows Phone 7.5 is not getting videos. When I go directly to YouTube or Vimeo it is in fact serving me videos on that device, so it looks like it is a problem with the way they handle the embed.

One solution to this problem is to just serve a YouTube/Vimeo link to the devices that does not support the embed and let the users open the video on the YouTube/Vimeo sites. The problem (except from the fact that you are linking the users out from your site) is that this is not testable in feature detection. So we would need to store the knowledge somewhere and do a conditional test on the serverside. I will do some more testing on this and post a possible solution for it once I have a demo up and running.

UPDATE: I have created a fallback solution for devices that does not support the embed by using server side techniques: Responsive embeds + RESS

Categorised in: Device detection, Responsive Web Design, RESS, Slideshare, Vimeo, YouTube

Written by Anders M. Andersen

http://twitter.com/larslindback Lars Lindbäck

Interesting post, Anders!
From your tests it’s clear that the various embeds needs some more work. I guess youtube, vimeo etc needs to add some more logic to handle mobile devices.
Also, they could easily add a fallback to a link (or clickable poster image) when HTML5 video is not supported, thus solving the problem with having to go to the site. My suspicion is that some of them is using a flash player as fallback.

You are also right in video + mobile devices = asking for trouble. There are so many factors to take into account here. You really need to know the codec support, which codec profile/levels to use, format and streaming protocol support (http live streaming? rtsp? http? smooth streaming?). And this is becoming more important in this post-Flash era…
http://amobil.se Anders M. Andersen

Lars, as I wrote to you on twitter, Vimeo is working on getting this to work for more devices. Not sure how they are implementing it, but adding an image + link is probably the easiest way of doing this.

But the problem we have now is how to handle this on our (web developers) side. We could add device detection and add a link to Vimeo for these devices, but what happens when Vimeo adds support? The the “fix” we did suddenly becomes a bug. I’m not sure how to handle this correctly without “hacking” it together…
http://www.facebook.com/gxsaurav Saurav Srivastava

Thanks for doing the comparison and good to see SlideShare embeds coming on top and working on all devices.

We are limited by only device capability to give a good experience like in case of Windows Phone 7.5 and Symbian, touch events don’t work yet. Although for Symbian Belle we plan to change it soon with the next version of SlideShare Mobile.
http://twitter.com/larslindback Lars Lindbäck

Well, since you cannot control the iframe content, it’s not that much you can do.
You could, as you say, keep track of the devices that cannot handle the iframe and link them to the yutube/vimeo site instead. But yes, it’s a hack…
Pingback: How to Scale Embedded Media in Responsive Designs | t3knoDorKs
Pingback: How to Scale Embedded Media in Responsive Designs | LoQuor IT – Chicago Integrated IT Solutions
Pingback: Responsive embeds + RESS – Anders M. Andersen
http://twitter.com/LouLouGarcia Louis Garcia

Nice article, thanks for sharing your findings!