Is the tab initially hidden?
I’d really need a live example to fix this quickly. I’ve not had the chance to fiddle with a Foundation theme yet.
@kentfarst Unfortunately, the version I’m running locally, Foundation 4.3.2, is in development, but this installation of Foundation 4.1.2 has the same issue.
http://mtype.com/?p=7
If the video isn’t loaded inside the active (initial) tab, there needs to be a callback function otherwise the main video doesn’t size properly on tab change.
Reference to the JS that makes Foundation’s tabs function: foundation.section.js
BTW, do not refer to Foundation’s most recent docs on version 5.x as tabs are handled differently. Please refer to Foundation v4 branch on Section.
Thanks!
Ok, I’ll just add an event to trigger a resize when iframe changes visibility || hide/show
I didn’t make the JS a proper jQuery plugin or you could just trigger the resize with one of Foundation’s callbacks.
I’m currently in the middle of some future proofing with the YouTube v3 API. So it might be a week or two before I can tag a new version with this update.
I tried adding some css to resolve the issue, but maybe fitvids.js could fix the resize better by figuring out the aspect ratio?
I referred to this post: http://www.smashingmagazine.com/?p=135771
The following markup works well enough that the video isn’t hidden.
.wp-theater-bigscreen-inner {
position: relative;
padding-bottom: 56.25%; /* This is for 16:9 ratio only */
height: 0;
overflow: hidden;
}
.wp-theater-bigscreen-inner iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100% !important;
}
I’ve made use of that css on a couple projects and for the most part it works. A bit finicky at times but I can add that as a no-js fallback. — I actually thought it was included in the last update.
Really, you can just turn off the JS file for this plugin if you’re not using the lower lights and full window or turn off keep_ratio [youtube dont_keep_ratio] and use fitvids.
