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


WP7.5 not getting any video love

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)


Press play on tape

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)


Nope

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


Symbian Anna

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: , , , , ,

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!

© 2014 Copyright.