Add a library to handle fluid sizes for embedded media.

Thanks for researching this! Seems like a lot of value for fairly little code, so I think it's a very reasonable addition to the core Media module. But if someone has another idea for a different project it should live in, please share your thoughts on that.

New features should go into 2.x first, so setting the issue version accordingly.

Also, cross-linking #1112462: YouTube videos no longer resize to fit their containers, which contains a use-case of this for media_youtube.

This adds some comments, and scopes the CSS tighter.

I haven't managed to test this patch (I tried and failed to get a youtube video uploaded - does media_youtube not work with media 2.x?) but I've reviewed the code and it looks fine.

This is one awesome uberfeature. Hope I find the time to test this out over the weekend.

I applied the patch (fine)against the latest dev but couldn't see any effect. Am I missing something here? Has somebody this working right?

I tested this patch together with the patch for media_youtube btw.

I am a bit baffled that not more people are screaming for this feature.

Update: I investigated this further and found out that somehow the patch applied wonky despite cygwin not complaining. After moving the changed files to the correct locations this patch works awesomely. I tested with my own subtheme of adaptive_theme which resizes normal images out-of-the-box but couldn't do the same for vids. Now it works perfectly. Thanks a million!

In case that somebody still cares I can report that the patch works with the latest dev of media module.

This is awesome and should really be included asap. I cannot set this to rtbtc because I cannot tell if the code is fine. What I can tell is that it works.

I am using a responsive/fluid website theme and would love to use this but i am not sure how to go about implementing it

where/how do i go about adding the library with drupal_add_library()

any help appreciated

Please don't change the issue status.

sorry thought the status would be applied to my comment not the whole thread.. i understand now

.

I am specing out a new Drupal site for a client and deciding which modules to use. My client would like to embed youtube videos and at the same time this will be a responsive design so I will probably create an Omega 7.x subtheme; obviously I am interested in this issue.

My questions are:

1. Has the patch from #3 been applied to any dev versions yet or is it still being tested?
2. If 1. above is false, do I then need to apply the patch to the latest dev from 2011-Dec-19 or should I apply the patch to the dev that existed at the time of the patch?

Thanks.

If the patch doesn't apply to the latest dev version, it needs to be re-rolled. We never patch old dev versions.

Assigning for reroll and review.

1. Small bikeshed that this library should probably be named 'media.responsive' or 'media-responsive-embed' as that better self-describes what this does.
2. Do we also need to add support for audio and video tags? Seems like that is left out here. Also wondering how images fit in here.

2. Do we also need to add support for audio and video tags? Seems like that is left out here. Also wondering how images fit in here.

"Fluid sizes" for "embedded media" includes images for me.

Shouldn't be difficult to add: for images to adjust to container size, <img> tags need a rule that sets max-width: 100%;, and they also must not have width and height attributes set on the html tag (since D7.9 these are automatically added by core; see #1129642: Populate HTML image tags with dimension attributes (like D6 imagefield) without re-introducing I/O). Not sure what the best way is to remove them...

Hunk #1 now has a massive offset, thus the need for a re-roll.

From a functionality perspective this patch is STILL awesome. I am running Adaptive Theme 3x and Corolla which takes care of normal images to make them responsive. Videos and such stick out on mobile browsers like a sore thumb but WITH this patch happiness and joy.

Are there broader issues with implementing this? It still seems to be a pretty important feature to me.

edit: I forgot to mention: Something changed. Patch not working atm...

I appreciate the work that's gone into this, but why add media specific code when the FitVids and the FitVids module exists?

1. FitVids.js is already widely used, across all types of web projects and platforms, and has thousands of eyes testing and refining it.
2. Fitvids can apply to all iframe and object embeds across a site, regardless of the module providing it. A Media-specific library will only apply to fields provided by Media -- if you have video embeds from other sources you're going to have to apply an external script anyways.

Does FitVids.js work for images? It's not clear at all from the website nor GitHub readme. That's the important part of this library I believe.

I'm pretty sure the original proposed library is iframe/object/embed specific. Fitvids doesn't do anything to make images responsive, but you don't need a js library to do that. One line of CSS in your theme will work fine.

If a user wants a module to help with responsive images, there's Media Responsive to look at, but it's basically a ui way to apply max-width:100% to media image fields.

IMO, responsive design should live as much as possible in the theme layer. Creating a functioning responsive site is not as simple as adding max-width to all img tags -- a site's architecture, layout, etc. will all help define when and how to alter images, and a developer will have their own preferences in method/technique. There are two ways responsive designs are going to be implemented in drupal projects: by users installing a prebuilt responsive theme or by firms/developers building a custom theme for clients. In both, there will be a front end dev with knowledge of how and where to define responsive images for that theme in CSS.

The DRY argument for FitVids applies doubly for images, html5 video and audio elements. Like dddave mentions above, responsive themes are already providing CSS to make images responsive where they need to be for that theme, regardless of providing module. Media, user picture, and image all providing responsive CSS to their own images -- let's avoid that if we can.

In regards to images, its drop-dead simple to make responsive images with CSS:

img {
  max-width: 100%;
  height: auto;
}

Done. Any sane responsive base theme already includes this.

As far as fitvids.js, it is ONLY for videos. Because the CSS technique that it applies with JS is only needed for videos. Its the frustratingly-static-sized nature of an iframe that causes issues. The CSS-only solution to responsive videos is here: http://amobil.se/2011/11/responsive-embeds/

Fitvids.js simply calculates the video's aspect ratio by looking at the height and width of the iframe, etc. and then uses that aspect ratio while appling the exact same CSS I linked to above.

In regards to images, its drop-dead simple to make responsive images with CSS:

Correct me if I'm wrong, but as far as I know this only works if your images do NOT have width and height attributes set on the <img> tag; And since D7.9 these are automatically added by core; see #1129642: Populate HTML image tags with dimension attributes (like D6 imagefield) without re-introducing I/O.

width: 100%;
height: auto;

Will override image width and height attributes. It will not override an inline style attribute.

just a pointer to my gdo post where I tried to start a discussion about responsive embeds: http://groups.drupal.org/node/233238

width: 100%;
height: auto;

Will override image width and height attributes. It will not override an inline style attribute.

Missing my point. I'm talking about height and width html attributes which prevent responsiveness: <img src="..." width="100" height="100"/>

Either way, I agree that responsive images are not really an issue that needs to be solved here; I didn't mean to distract from the actual issue, i.e. adding support for responsive video/media...

I believe that is what John is talking about. The width and height HTML attributes are the bottom of the rung (the spec calls them a browser "suggestion"), and should be easily overridden by any CSS responsive techniques. Is there a browser you're seeing different behavior in?

Yes, the issue I had was definitely a browser-specific one (IE, if I remember correctly); removing the attributes from the <img> tag helped in my case, but in retrospect this may have also been caused by something else (quirks mode possibly). So if the css in #25 generally works for people, I probably misdiagnosed my issue...

in regards to the claim that #25 John Pitcairn states about the

width: 100%;
height: auto;

I was not aware of this so I created a test to verify that.
Confirmed that it works on the modern browsers I tested it with (Chrome, Firefox, Opera)

Based on the discussion in #1535954: Responsive Embeds, #1112462: YouTube videos no longer resize to fit their containers, http://groups.drupal.org/node/233238, and #1555276: Clean up theming function, Use recommended iframe player by default, without js, along with the committed patch that removes all M:YT specific responsive js, I think we can mark this as works as designed. You can apply any css or js based responsive code to all iframes on a site now, and it should work fine with M:YT.

If people want to discuss further, feel free to reopen the issue.