Looks great in Chrome, Safari, etc. for Mac (desktop), but breaks height of container in iOS Safari (iPad & iPhone)

[charliepratt]

Looks great everywhere except my iPhone and iPad, where the video content breaks it's container and goes real, real tall.

[chriscoyier]

A demo of FitVids is the site itself http://fitvidsjs.com/ which works on iOS http://cl.ly/PCN8

If you could make a live demo of your particular problem and put it online, perhaps it could be sorted out from that.

[charliepratt]

Looks great on desktop, but iOS Safari breaks the layout like a boss.

Link: http://cl.ly/PC47

[chriscoyier]

I can confirm iOS breaks on that page. Screenshot: http://cl.ly/PBW0

It's hard to say if it's something core to FitVids.js, or if there is some kind of CSS or something on that page that is causing the issue. I'll leave the issue open but I'm afraid I can't promise we'll be able to dig into it very soon.

[charliepratt]

Thanks, Chris. I narrowed down the culprit. It's a JS file called jquery.popup.js in the file structure. Here's a link to the file - can you see anything there that would be creating a conflict with Fitvids?

http://cl.ly/PBbs

[davatron5000]

Looks also like jquery.forms.js ~ln128 is sniffing for Safari AND jacking with iFrames. Perhaps this has something to do with it.

If you could narrow down the conflict that'd be great. Otherwise, I'd put FitVids highest in execution order and see what happens. FitVids runs once and then does nothing after it runs. It typically doesn't run into too many conflicts, only if a script is altering the iFrame before the code runs.

It could also the Double Embed (object > embed) bug coming back but just for Mobile Safari. Not sure.

[calebjacob]

For what it's worth, I've been pulling my hair out over the exact same issue on iOS 6 (specifically the latest versions of Safari and Chrome on the iPhone 4S). Everything works great on any desktop browser, but on iOS, the video breaks out of the container and ends up being about 10 times taller than the window height - breaking quite spectacularly.

I've gone as far as completely removing all my styles and trying everything I can think of to see what JS conflicts I could possibly have - no luck. Sadly, I can't link to any examples due to contract agreements - but it's the exact same issue as @charliepratt.

This is probably going to force me to write my own thing based on calculating hard values - at least for the height. No the greatest, but I'm out of options it seems.

Anyways, thanks for the great work!

[mattbrett]

I'm struggling with the same issue here, and have gone as far as to remove every other script and bit of JS on my site except for FitVids, but the issue remains. Unfortunately, I'm working on a large client project that I can't share prior to launch.

[davatron5000]

@mattbrett not being able to share the site really limits how much we can help. can you provide a reduced test case that demos the bug?

[mattbrett]

@davatron5000 Yeah, I realize that, and unfortunately no I can't provide a reduced test case.

I've just realized that the videos I'm having trouble with are using the old YouTube object/embed method.

[davatron5000]

😦 Unfortunately I can't help. Be sure you're using the latest version of FitVids. Lots of object/embed work happened there.

[kkomelin]

Hi guys,

The same issue. Video height is too big.

iPhone 5, Safari, Drupal 6, latest FitVids, jQuery 1.2.6
It happens for 'object' tags only.

I understand that my jQuery version is too old but FitVids plugin doesn't contain version specific code, as I see.
Sorry, I cannot show an example. But maybe this information will help to narrow scope of the issue.

Thanks.

[kkomelin]

Some addition: I commented out $allVideos = $allVideos.not("object object"); line because of another my bug #58 (comment)

[kkomelin]

Attached screenshot from BrowserStack simulator of iPhone 5:

[davatron5000]

You need to upgrade jQuery. Your version of jQuery is 5 years old. 

• The wrap() function had lots of work in version 1.4 of jQuery. - There could be cross domain issues that were solved by older jQueries. 
• iOS should be receiving an HTML5 video as they don't support Flash. So there's probably a problem with your embed code. 

We can't even begin to debug your code without a reduced test case.

[kkomelin]

Thanks @davatron5000 !
We'll think about upgrade.

[kurtwaldo]

I had issues with using document ready before calling fitVids. Just place at bottom of execution.