Menu icon Foundation
Flex Video Adds Black Spaces

Hi -

Flex video seems to be adding black space above and below the full width Youtube Video I am embedding as background. Does anyone have any ideas as to how I can remove the black spaces so the top of the video is flush with the top of the window?

Here's the code I'm using.

<div class="flex-video">
        <iframe width="640" height="360" src="//www.youtube.com/embed/wN3gueLT0D8?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

            

         

youtubeflex videoBlack Spaceborder

Hi -

Flex video seems to be adding black space above and below the full width Youtube Video I am embedding as background. Does anyone have any ideas as to how I can remove the black spaces so the top of the video is flush with the top of the window?

Here's the code I'm using.

<div class="flex-video">
        <iframe width="640" height="360" src="//www.youtube.com/embed/wN3gueLT0D8?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

            

         
Rafi Benkual over 4 years ago

I think this border is there to maintain the aspect ratio. Have you tried changing the padding?

$flex-video-widescreen-padding-bottom: 57.25%;