Responsive Embeds

Nice link. I've been using fitvids.js which works well, but a pure markup and css method would be nice. Have you run into any browser inconsistencies?

Thanks. Looking good.

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.
4. 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.

I just glanced at the js tonight, going to dig a little deeper into it tomorrow and see what's going on. I may find that I'm off about a point or two here, but the code definitely needs a little cleanup

Thanks. To condense my point: if every module adds responsiveness to what it provides, there will be 100 different ways of making the same html responsive in one site conflicting with each other every which way. IMO responsive support belongs in themes (who may have different preferences between them for which responsive techniques they're using sitewide) or a separate module that applies the same technique once across a repeated html structure sitewide. So these snippets should be removed, especially if they're not functioning. Let's respect the front end devs!

@RobW
Would you care to help us out over at #1413558: Which class selector to use with embed videos from youtube and provide a little insight for us lesser talents?

Going all FitVids would be ok for me if I would understand how to do it properly. If I get a better understanding of it I would write down a beginner guide.

In general I agree with RobW that we need a universal approach for this. Providing code in each and every Media implementation would be way too much.

@dddave, of course, I would be happy to. I might not get to it until after the weekend though.

#1112462: YouTube videos no longer resize to fit their containers is about resizing embeds as well.

One of these should be marked as duplicate and the discussion consolidated, but not sure which. Both threads have good, unique info, and the other has patches (although 9 months old and in the opposite direction I think we should go).

I took the liberty and quoted @RobW's comment in #3 at length for my Media Group posting at http://groups.drupal.org/node/233238

Everybody feel free to chime in over there.

That's a nice g.d.o. thread that you've started there dddave. One more link with some responsive examples to throw in the mix is this one: http://amobil.se/2011/11/responsive-embeds/

I'm asking some of my teammates here at Metal Toad Media about this issue, and we'll be evaluating our approach over the next couple of weeks. Just wanted to chime in that this issue is on our radar.

Another issue with active discussion that this is a semi-dupe of: #1278180: Add a library to handle fluid sizes for embedded media..

Whoops, somehow got a double post in there.

@KentBye

One difference I see is that http://amobil.se/2011/11/responsive-embeds/ requires you to remove the width and height of the embeds whereas fitvids.js does this on the client side with jquery.

The basic difference between FitVids and a css solution is that Fitvids calculates the aspect ratio of each video embed seperately, and applies the css padding-bottom trick for that particular aspect ratio individually to each video. If all videos on your site are the same ratio you'll get great results with a css only solution (like the tutorial posted in the issue summary, http://webdesignerwall.com/tutorials/css-elastic-videos). If you have different aspect ratios and want the videos sized exactly (no black bars), FitVids is the way to go.

If width and height are supplied in the html by width and height attributes any css should override them. If they are in a style attribute you'll need js or an !important declaration to override. All embeds I've seen use the width and height attributes, which shouldn't need to be removed by js in most situations. Maybe Fitvids does because they've run into an edge case I haven't.

@Rob_feature Just posted a patch that addresses the problems I mentioned in #3 and some of the Fitvids problems as well. #1555276: Clean up theming function, Use recommended iframe player by default, without js

Patch in the above issue has been committed to 2.x, so all standard ways of making iframes responsive (css/Uncle Dave's old padded box, fitvids.js, etc.) should work fine now!

fitvids.js works very well, there's also a module to manage it:

http://drupal.org/project/fitvids

thank you. great solution, Rob.