Menu icon Foundation
Tabs and Flex-video not working

I’m upgrading from v3 to v5 and I cannot get flex-video and Google maps to work inside of tabs. When I click on a tab I get a 100 px tall empty content area where the video or map should be. If I remove the tabs-content class every things shows up. Also if I remove the

<div class='flex-video widescreen vimeo'> 
            

         

from the video it shows up but is not responsive.

tabsflex video

I’m upgrading from v3 to v5 and I cannot get flex-video and Google maps to work inside of tabs. When I click on a tab I get a 100 px tall empty content area where the video or map should be. If I remove the tabs-content class every things shows up. Also if I remove the

<div class='flex-video widescreen vimeo'> 
            

         

from the video it shows up but is not responsive.

Chad R. almost 5 years ago

Same issue here. If I embed an iframed video using the flex-video class inside a tab panel... nothing shows up at all inside the tab panel... just blank. If you solved this can you post your solution? Thanks in advance!

Here is my code...

<div class="tabs-content">
    <div class="content flex-video active" id="panel2-1">
        <iframe src="//player.vimeo.com/video/15262537?title=0&byline=0&badge=0&portrait=0&color=008cba" width="1280" height="721" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>

    <div class="content" id="panel2-2">
        <p>Second panel content goes here...</p>
    </div>

</div>

Michael LaRoy about 4 years ago

I've found (using bootstrap) that a google map won't load if it's inside a non-active tab - if it isn't hidden to start with, it should load just fine. Perhaps the same might apply here.