How to remove black video background in CTA Module

Beaver Builder
1

Hi

I am using a vimeo video in a CTA module, but there are black bars and a black background behind the video. This is very obvious if the page resizes. I can resize the video to hide the black on a large display, but it still shows when the browser resizes.

How can I remove the black background?

Test page http://hooktamer.com/bb3

The video module displays fine

Thanks in advance

2

I found some code that works, see below, but maybe there is an easier way?

HTML

<section class="d5-d13 c5-c13 b5-b13 a5-a13 video">

   <div class='embed-container'>
      <iframe src='http://player.vimeo.com/video/69252713' frameborder='0'
      webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
   </div>

</section>
CSS

.embed-container { 
position: relative; 
padding-bottom: 56.25%; 
padding-top: 30px; 
height: 0; 
overflow: hidden; 
max-width: 100%; 
height: auto; 
}

.embed-container iframe, .embed-container object, .embed-container embed { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%;
}
3

I still don’t like the black bands with the above code

4

Hey Jon,

The black background seems to be added in Vimeo’s iframe which we have very little control over. We can control the iframe size by perhaps specifying specific dimensions to it on certain screensize breakpoints using CSS media query but even so, the black bands would still be there. There seems to be no way to get rid of them. There is a solution that uses JS that’s discussed here but you end up losing some of the playback controls.

Jun

5

The normal bb video module displays fine, its only video used in the slider for CTA module.

6

Hi Jon,

The reason why the video module works fine is that it uses FitVid.js. This turns any video added to the Video module into a responsive video. The CTA module doesn’t use this script.

Therefore, if you want to remove those borders and still use the CTA module, you will need to follow Jun’s suggestion. Alternatively, you could add your video(s) to those areas with the Video module instead of using the CTA module.

Thanks,
Danny