Menu icon Foundation
Flex Video inside Tabs problem

I am facing problems adding a youtube video into a foundation 5 tabs.
Can you please inform me if this is a bug or if i am doing something wrong?

Below there is some example code.

<dl class="tabs" data-tab>
    <dd class="active"><a href="#panel2-1">Description</a></dd>
	<dd><a href="#panel2-2">Video</a></dd>
</dl>
<div class="tabs-content">
    <div class="content active" id="panel2-1">
		<p>whatever</p>
	</div>
	<div class="content" id="panel2-2">
	    <div class="flex-video">
			<iframe width="640" height="360" src="//www.youtube.com/embed/UWcE4QkGGJM" frameborder="0" allowfullscreen></iframe>
	    </div>
    </div>					  
</div>
            

         

flexVideoyoutube

I am facing problems adding a youtube video into a foundation 5 tabs.
Can you please inform me if this is a bug or if i am doing something wrong?

Below there is some example code.

<dl class="tabs" data-tab>
    <dd class="active"><a href="#panel2-1">Description</a></dd>
	<dd><a href="#panel2-2">Video</a></dd>
</dl>
<div class="tabs-content">
    <div class="content active" id="panel2-1">
		<p>whatever</p>
	</div>
	<div class="content" id="panel2-2">
	    <div class="flex-video">
			<iframe width="640" height="360" src="//www.youtube.com/embed/UWcE4QkGGJM" frameborder="0" allowfullscreen></iframe>
	    </div>
    </div>					  
</div>
            

         
Rafi Benkual over 5 years ago

Seems to be working here:
http://cdpn.io/snHGk

Anyone else have this issue?

Sebastian Sulinski almost 5 years ago

I have the same problem with google maps - it makes it much higher than defined height on the iframe - at least double the height. Any idea what might be causing it?

Ryan Hellerud over 4 years ago

i have the same issue with my code as well. any ideas?