Log in SwiftGrid →
Resolved

Footer height increases due to padding from YouTube WD plugin

Ultra Theme started by provwp Jun 16, 2017 3 replies
provwp Jun 16, 2017 · 12:42 am #7002

Hi Andrew,

I have a YouTube WD plugin to embed a YouTube channel into the website. It works very well, except that the footer height increases abnormally large as seen now (beta.vedantaprov.org). We found this to be due to “padding-top” in the following div from “Inspect” tool of Google chrome:

<div class=”fluid-width-video-wrapper” style=”padding-top: 636%;”>

1. If we change “padding-top” to “100px” or “100%” in the Inspect tool then the footer height is fine. Note that is not a feasible solution as Inspect tool is just a preview in the web-browser.
2. If we disable usage of FitVids.js through Appearance->Customize->Theme Settings->Layout, footer height is again fine. This is the currently the feasible solution.

Little more digging in code points me that most likely culprit is here:
/wp-content/themes/ultra/js/jquery.fitvids.js

The likely place there could be:

1. var css = ‘.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}
OR
2. $this.wrap(‘<div class=”fluid-width-video-wrapper”></div>’).parent(‘.fluid-width-video-wrapper’).css(‘padding-top’, (aspectRatio * 100)+”%”);

Anyway, here it goes beyond my skill level. Can you kindly let me know what needs to be changed to avoid this issue? Also by not using fitvids.js would I have any issues on responsiveness of the website across mobile/tablet/larger screens?

Thanks again,
Srikanth

Andrew Misplon Puro Jun 16, 2017 · 10:03 am #7013

Hi Srikanth

Thanks for posting.

Try going to Customize > Additional CSS and inserting the following:

body {
    background: #fff;
}

Does that help?

The footer itself doesn’t get big, the background color of the body is the same as the footer so it can looks like it’s all footer.

I don’t recommend turning off FitVids, that handles the responsive resizing of the video for various devices.

If you wanted to turn off FitVids for this one video you can do so. I document how to do so here: https://purothemes.com/documentation/general-wordpress/deactivating-fitvids/.

provwp Jun 18, 2017 · 3:31 am #7050

Hi Andrew,

Thanks for your help. I downloaded the YouTube WD plugin afresh and now it seems to be working fine. Maybe I messed up the plugin code earlier or they updated it themselves.

I checked that by deactivating FitVids option, the videos still scaled well on laptop and mobile. Since downloading the plugin again resolved the issue as mentioned above, I kept the FitVids option active for now.

You can close this issue. Thanks again for your help.

Regards,
Srikanth

Andrew Misplon Puro Jun 18, 2017 · 4:30 am #7051

Super 🙂 Really glad to hear everything is working normally now.

All the best with your site and future projects.

4 posts