Fitvids.js breaks layout ...but only in the mobile template?

charliepratt

Problem link: http://cl.ly/PC47

Using Fitvids.js https://github.com/davatron5000/FitVids.js to size YouTube videos to fit.

Works great on desktop browsers, but breaks the layout big time on mobile browsers. Help?

vrijvlinder

All you need @charliepratt is to add these lines into the mobile css

object,embed,iframe,.Video embed{
max-width:300px!important;
height:200px!important;
text-align: center!important;
}

hgtonight

Wild guess here, but it looks like fitvid.js requires jQuery 1.7 and 2.0.18.8 ships with jQuery 1.6.2.

P.S. I like your forum theme.

charliepratt

Thank you!

I loaded jQuery 1.7.1... still breaking. This is driving me crazy.

charliepratt

@hgtonight — I'm getting close! I've narrowed it down. The problem is definitely in the jquery.popup.js file. Not sure what could be causing it though.

hgtonight

You don't have a jquery.popup.js file loading on that page.

charliepratt

You may have caught me when I was removing things to determine the culprit - it's there though now -

<script src="/js/library/jquery.popup.js?v=2.0.18.8" type="text/javascript"></script>

hgtonight

What user agent are you using?

This link works fine on my smart phone (android JB) and on iphone (through ff).

EDIT - I suppose user agent doesn't matter as much as the rendering engine/js engine. Tested in FF, Android Browser, Chrome, IE. All with multiple user agents. Looks fine.

vrijvlinder

All you need @charliepratt is to add these lines into the mobile css

object,embed,iframe,.Video embed{
max-width:300px!important;
height:200px!important;
text-align: center!important;
}

charliepratt

@vrijvlinder - great tip(!), but mobile Safari for iPad is still breaking...

charliepratt

@hgtonight - how can I change the order of execution for the JS files in Vanilla? I'd like to put Fitvids.js higher in the order, as that might be a possible solution.

hgtonight

How are you adding fitvid.js right now?

charliepratt

First, I added it in the master .tpl file for my theme. Now I've added FitVids code to my own core.js file, and am calling it via my themehooks file. But, it's not executing those JS files any higher than the core files for Vanilla.

hgtonight

If you want to load a js file before the core, you can definitely do it via your default.master.tpl file. Put it before the {asset name='Head'} tag.

I don't think this is going to solve your problem though.

charliepratt

@vrijvlinder - I ended taking your suggestion and doing it all in CSS, targeting smartphones and tablets with media queries. Well done.

peregrine

V - I clicked insightful - which the op's would do that.

vrijvlinder

Yea @charliepratt that is a good solution that works every time. I personally feel that js should be used sparingly and css used a whole lot , much like the insightful or awesome reactions buttons here but avoid the troll one please