Blog Documentation Book a Demo

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

charlieprattcharliepratt ✭
in Vanilla 2.0 - 2.8

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?

Tagged:

Best Answer

  • vrijvlindervrijvlinder MVP
    Answer ✓

    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;
}

Answers

  • hgtonighthgtonight MVP

    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.

  • charlieprattcharliepratt ✭

    Thank you!

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

  • charlieprattcharliepratt ✭

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

  • hgtonighthgtonight MVP

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

  • charlieprattcharliepratt ✭

    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>

  • hgtonighthgtonight MVP
    edited May 2013

    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.

  • vrijvlindervrijvlinder MVP
    Answer ✓

    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;
}
  • charlieprattcharliepratt ✭

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

  • charlieprattcharliepratt ✭

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

  • hgtonighthgtonight MVP

    How are you adding fitvid.js right now?

  • charlieprattcharliepratt ✭

    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.

  • hgtonighthgtonight MVP
    edited May 2013

    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.

  • charlieprattcharliepratt ✭

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

  • peregrineperegrine MVP

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

  • vrijvlindervrijvlinder MVP

    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 :)

Sign In or Register to comment.