Doesn't work with floated elements

[randysrodeo]

trafficstars

I recently identified what I think is a weakness of the FitVids script - which I have otherwise found quite valuable, by the way. It doesn't account for floated elements when calculating the video container width, thus obscuring all or part of the floated element.

You can see it twice, first in a simple mockup with one floated div (hidden) and one video: http://www.dfps.state.tx.us/Child_Protection/About_Child_Protective_Services/transformation/video.html

And then, in a copy of a working page built on jQuery and Bootstrap: http://www.dfps.state.tx.us/Child_Protection/About_Child_Protective_Services/transformation/default-test.asp

I'm not enough of a coder to solve this. Any ideas? Essentially, I think we need to calculate width after the float is applied...

FYI, here's what it looks like after I wrapped the main video in a Bootstrap-specific element. It works, but I'd much rather it work automatically - without the extra code. http://www.dfps.state.tx.us/Child_Protection/About_Child_Protective_Services/transformation/default.asp

[andyadams]

Without adding extra markup, I don't see a particularly elegant way to make this happen. Calculating the width of (potentially interfering) floating elements seems really hard, though I wouldn't be shocked if someone proves me wrong!

For what it's worth, by adding a few styles to .fluid-width-video-wrapper, you can make it work in the scenarios you listed. See this pen for an example:

http://codepen.io/andyadams/pen/QbGRwP

I'm not sure if this would affect other places you're using fitvids, but you could change the selector to be specific to these particular pages - something like #content-text .fluid-width-video-wrapper, to limit the side effects.

[randysrodeo]

Interesting, and thanks. If I also use max-width:auto, it works - doesn't obscure floated element and does not interfere with the float. But, it messes up the aspect ratio of the video....

.fluid-width-video-wrapper { max-width: auto; overflow: hidden; width: auto; }

Simple example: http://www.dfps.state.tx.us/Child_Protection/About_Child_Protective_Services/transformation/video.html

Applied example: http://www.dfps.state.tx.us/Child_Protection/About_Child_Protective_Services/transformation/default-test.asp

But, if I leave the additional wrapper on, it works as before - which means we're (almost) back to where we started: http://www.dfps.state.tx.us/Child_Protection/About_Child_Protective_Services/transformation/default.asp

What I'd like to do is amend the javascript where it incorporates the float into the width calculation. I've seen this concept brought up in similar scripts but, like I said, I'm no coder....

[davatron5000]

Howdy! It's been a couple years. Was a decent resolution met here? Does FitVids need to address anything here?

[randyrodeo]

Floated content is hardly uncommon, so it'd sure be nice if FitVids could address it.

Here's the current link: http://www.dfps.state.tx.us/Child_Protection/Transformation/default.asp

I have temporarily "unwrapped" the video so you can see the problem. I'll leave it that way for a couple of days to give you a chance to poke around.