Videos within iframes being hidden until refreshing the page

Hello, I am having some issues related to the enfold theme and a plugin I am using to manage video submissions called TotalContest. When viewing an individual video, upon the initial load of the page the video appears to be hidden due to a class of “avia-iframe-wrap” wrapping the iframe that the video is being placed into. Using the developer tools, it seems the issue is related to the padding that is placed on iframes inside this wrap. For some reason, on initial load of the page the “padding-bottom” property is set to zero and not overridden, but after refreshing the page JS is firing that adds bottom padding onto the element making it visible.

I am assuming there is some kind of conflict where the height of the iframe is not determined at the time that JS is detecting how to size this element. I assumed this might be due to a conflict with lazy-loading so I tried disabling it, but this did not correct the issue. I’m sure I could simply set a style rule like this:

.avia-video-16-9, .js_active .avia-iframe-wrap {
    padding-bottom: 56.25%!important;
}

but I am not sure what potential issues could arise elsewhere from doing this to the theme, so I wanted to try to reach out to see if there was a more elegant way to solve this issue. Any assistance anyone could provide me with would be greatly appreciated as I am not very familiar with using this theme.

Edit: After poking around some more, it seems like that styling change is the best way to go. The padding issue was actually coming from the plugin, not the theme.

• This topic was modified 4 years, 6 months ago by chrisdenslow. Reason: code formatting