Midget Video Mystery

I’m using Newspaper theme (love it) on a site that was existing for some time (did clean install). This site has a 3rd party set of plugins (Responsive Accordion & Tabs Responsive) as part of it’s previous design on one large set of pages. The tabs are placed inside of accordions to organize content. The site has a huge number of pages using these plugins. All of these pages have a tab with Vimeo video embeds in it.

Previous to use of the Newspaper theme these Vimeo videos displayed as a normal Vimeo embed would inside the accordions/tabs. With the Newspaper theme, however, on larger screens (mobile is fine) the videos appear as very small thumbnails at 56.25px high which is an odd number for a height! The videos still play but they have no controls available because they are so small! In the source code I can see an inline css style being injected to make them this height.

This issue does NOT occur if I embed a Vimeo video on a new page without any accordions/tabs. If I add an inline css style with height and width this problem goes away, but then the video no longer acts responsively and is too large on mobile and gets partially cut off of course.

Odder yet, is if I use zoom, even just a little in the browser the video immediately snaps to full size. However, all attempts to use css zoom via js to make the body a bit bigger did not work to normalize the size of the videos even though they did indeed zoom the scale of the page being displayed.

While I understand tagDiv probably will say this is a problem with a 3rd party plugin and they can’t support it, it does appear this inline css style for a 56.25px video height is being injected by the Newspaper theme as I have disabled all plugins that have amything to do with images and thumbnails etc, cleared all caches, and the problem still occurs.

I am hoping someone might have some type of insight they can offer as to how I can resolve this issue without re-creating hundreds of pages.

You can see an example of the problem here:

https://globalhealing3.wpengine.com/members-holistic-health-portal/holistic-solutions-for-common-diseases/holistic-solutions-for-asthma/

Scroll down a bit, click the Meditation Accordion to expand it, then click the Video tab. You’ll see the issue.

That’s the dev site version, it has since gone live, but the live site is in maintenance mode pending the resolution of this issue so it’s not accessible.

I would like to thank you Vlad, Simion and others on the tagDiv support theme for sticking with us and finding a solution. Your support is stellar! I would also like to share the css solution you provided for anyone else coming across this thread that has a similar issue.

In Theme Panel, in the Custom Code > Advanced CSS > Desktop section add this css code:

.tab-pane.active iframe,
.wpsm_panel-body iframe {
max-width: calc(177.778vh) !important;
height: calc(56.25vw/2) !important;
max-height: 100%;
}


And then further down in the Phones section of that same page add this code:


.tab-pane.active iframe,
.wpsm_panel-body iframe {
max-width: calc(177.778vh) !important;
height: calc(56.25vw) !important;
max-height: 100%;
}


That fixed the issue for us and saved us from having to rebuild hundreds of pages, not amount of gratitude could ever suffice to say how much we appreciate the efforts of the tagDiv support team!