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:
- Created a structure 1 column
- Remove Padding and Gutter
- Insert Video Block
- Add Video
- 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)
@PeteSharp
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?
@PeteSharp
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
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…
<style>
.embed-responsive-16by9::before{padding-top:37.25%!important}
</style>
1 Like
@PeteSharp
Thanks again! Lot’s of coffee coming your way!
1 Like
