Video as Hero take 2. [SOLVED]

Hi Guys, I’m back and checking again if I can get this resolved from any of you gurus out there. I have a video I need as the main header. No matter what I do I can’t seem to get the video to display correctly and don’t know enough about the class editor to edit the settings and only guessing.

Here are the steps I’m taking:

  1. Created a structure 1 column
  2. Remove Padding and Gutter
  3. Insert Video Block
  4. Add Video
  5. Add class and edit

This screenshot is on my 24" screen

This screenshot is on my 15" screen (I get huge black bars now)

Class Settings:

Hi @johnandrew

So something like this… (The p-0 class I add to the column is a Bootstrap class removing all padding)

Video_Header_Example.bloc (1.4 MB)


Thank You, for the quick response and going above and beyond with video tutorial. I followed your video and that worked slightly. When I view on my 15" Macbook, I get the same huge bars on top and bottom of the video. Does this need to be adjusted in the class editor also?

If you open that Project file I posted, do you get the same effect on your 15" MacBook ? By the way Im using a 16" MacBook.

Also looks like you are applying that vide class twice, on the column and the video?


I just checked yours and I get the same bars.

Are you sure those bars are not in the video.

If you keep the video that’s saved in my project (eg don’t add a video, blocs will) do you get bars?

Can you send me a copy of the video. I can PM you a link for dropbox


Sent email.

FYI - for others with a similar problem.

It was just a matter of overriding the Bootstrap Embed class with a percentage = to the video ratio (as the video was a non standard size)

You can work out by dividing the heigh by the width in px.

In this case… 1335px / 3584px = 0.37248. So 37.25%

Normally you would make a new embed class, but if you want to use the Blocs video Bric you can override the Bootstrap default class…

1 Like


Thanks again! Lot’s of coffee coming your way!

1 Like