Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

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

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?

Best Answer

Answers

  • hgtonighthgtonight ∞ · New Moderator

    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.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • Thank you!

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

  • @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 ∞ · New Moderator

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

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • 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 ∞ · New Moderator
    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.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • vrijvlindervrijvlinder Papillon-Sauvage 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;
    }
    
  • @vrijvlinder - great tip(!), but mobile Safari for iPad is still breaking...

  • @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 ∞ · New Moderator

    How are you adding fitvid.js right now?

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • 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 ∞ · New Moderator
    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.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

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

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

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • vrijvlindervrijvlinder Papillon-Sauvage 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.