Menu icon Foundation
flex video inside tabs

Having trouble with flex video, its making the size double the specified size. Im saying 300 x 250 and its comming out 637 x 420. Basically, no matter what I change the size to it stays the same.

<div class="content" id="panel2">
   <div class="row">
       <div class="large-6 columns">
            <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo invetas sit auam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?".</p>
       </div>
       <div class="flex-video">
        <iframe width="300" height="250" src="www.youtube.com/embed/aiBt44rrslw" frameborder="0" allowfullscreen></iframe>
</div>
   </div>
   <a href="#" class="button info round">Learn More</a>
   <a href="#" class="button success round">Sign Up</a>
  </div>
            

         

flex video

Having trouble with flex video, its making the size double the specified size. Im saying 300 x 250 and its comming out 637 x 420. Basically, no matter what I change the size to it stays the same.

<div class="content" id="panel2">
   <div class="row">
       <div class="large-6 columns">
            <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo invetas sit auam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?".</p>
       </div>
       <div class="flex-video">
        <iframe width="300" height="250" src="www.youtube.com/embed/aiBt44rrslw" frameborder="0" allowfullscreen></iframe>
</div>
   </div>
   <a href="#" class="button info round">Learn More</a>
   <a href="#" class="button success round">Sign Up</a>
  </div>
            

         
Rafi Benkual almost 4 years ago

The size is controlled by the container width, based on the aspect ratio. Make the tab smaller or have more padding will shrink the video.

You have some options to control the padding

// We use these to control video container padding and margins
$flex-video-padding-top: rem-calc(25);
$flex-video-padding-bottom: 67.5%;
$flex-video-margin-bottom: rem-calc(16);

// We use this to control widescreen bottom padding
$flex-video-widescreen-padding-bottom: 57.25%;

<div class="flex-video widescreen youtube">

There is also a class for youtube's aspect ratio