Responsive Media

Introduction

Serving the content of a site to mobile devices is more important then ever and a lot of sites take a responsive approach, i.e. not using a dedicated mobile version of the site but instead resize and reorder the content depending on the screen-size.
Using a theme like Omega, AdaptiveTheme or Arctica (just to name a few) you can create a responsive design fairly easily. Images resize nicely thanks to html5 and the same would go for videos utilizing the "video" element.
The crux for users of the Media module and supporting module like Media_Youtube is that rich media embedded to your site usually comes in form of an iframe or other "magic" and making these embeds responsive is not trivial.

Solutions

1. CSS

http://webdesignerwall.com/tutorials/css-elastic-videos
This works well but requires some swagger for users not used to fiddle with css. Using this approach for wysiwyg-embeds might be quite hard.

2. FitVids.js

http://daverupert.com/2011/09/responsive-video-embeds-with-fitvids/
This approach works well in general and comes with a dedicated and maintained module: http://drupal.org/project/fitvids
The problem here is that setting the module up to work with Media_youtube is far from trivial as documented in issues as: Which class selector to use with embed videos from youtube
So far I couldn't get it to go completely. Not only is there the need to set the height and width to „empty“ in the manage file display screen if you are using a file-field. After that your video is responsive but somehow receives a dinky height: 150px; from somewhere when the height needs to be set to „auto“. So far I neither was able to make out where the 150 is coming from nor if I am using the fitvids module correctly. Feedback would be very welcome.
If we could document how to use this module alongside Media users could easily achieve responsive behavior without diving into files like in the css approach.

3. Media provides fluid embeds out-of-the-box

Media (or a submodule) could provide fluidity of embedded media directly without further fiddling. This is discussed in the following issues:
Add a library to handle fluid sizes for embedded media
Which was working a long time ago but currently seems broken.

Responsive Embeds
A dedicated issue in Media_yt's queue which spawned most of this post. RobW raises some very valid points:

I also noticed that there's some .js in the Youtube and Vimeo media modules meant to make videos liquid/responsive. Problems there are:
1.They're in both Vimeo and Youtube modules, so if they were called would be repeating themselves.
2.They're never called in the Vimeo module, so probably aren't that important/used/functional.
3.They're definitely loaded by default with Youtube, whether wanted or not.
I don't think that making a video responsive should be part of the basic functionality of a module like this, especially if it adds complexity, javascript, or page weight. If a user has Youtube, Vimeo, an oEmbed provider, and their own uploaded videos on a site they should be able to add responsiveness across the board with either a js plugin calling a sitewide video class, or a css solution based on repeated structure and class names. The thing they (ok, I mean I) don't want is two or more proprietary solutions overlapping and conflicting with each other.

Rich media display with and HTML5 elements.
This issue is more about correctly supporting video and audio elements. As far as I understand it embedded content wouldn't be affected by this. Am I correct?

Bottom line

I think that responsive handling of „rich“ media is an important topic. And considering the impressive adoption rate of Media I think we should provide a good solution for users not keen or able to hack a solution together. As far as I can see we either make Media work with fitvids.js and document how to correctly set this up OR we provide a solution ourselves (via media-core or a submodule).

Questions

1. What is or should be the course of Media?
2. What are your recipes to provide responsive media embeds?
3. Should we use a dedicated tag on issues affecting or about responsiveness/mobile- friendliness? Which one?

A better formated and better formulated version of this post was swallowed upon preview. Sorry, but that is all I was able and willing to restore. Improvements might follow.

Results

Thanks to RobW for his awesome work making media_youtube sane and DRY. We now have working blueprint how to embed in a way that we can achieve responsive designs with reasonable effort. Using fitvids.js now is pretty easy, especially if you understand a little bit of CSS. This is definitely a big leap forward.
Thanks to Aaron Winborn for committing the patch.