Accordion with video issue

[raybb3uk]

Hi,

I have a page with an accordion bric with a video as a card. How can I remove the ‘padding’ around the video?

https://valleywebdevelopment.info/clients/fcf2

Thanks in advance

Ray

[PeteSharp]

The “padding” is white space in the video element due to the aspect ratio that is being applied with the CSS.

You seem to also have two ratio classes on the one video element.

[raybb3uk]

Hi Pete,

Thanks for your reply. I can’t see where the ratio has both elements in the project.

Is there another way of showing portrait videos to ‘fill’ the space with a small border perhaps, again within an accordion?

Ray

[PeteSharp]

The ratios built into the Bootstrap framework do not include one for vertical video.

About - Ratios

But you can make your own easily enough. I have posted before how to make them.

The trick is setting a padding-top that has the height / width * 100

Help with 2.35:1 video aspect ratio

Hi @Dragonfly, Make a custom class called video235 Apply that class to the video in question. Then add this to the page header <style> .video235::before {padding-top: 42.55%!important} </style> That will over-ride it to the 2.35:1 ratio. But also allow you to still display 16:9 if you like, by just not using that class. Note: If any one is interested how you work out the percentage. its the height / width * 100. eg. 2.35:1 ratio is… 1 / 2.35 * 100 = 42.55%

[raybb3uk]

Thanks Pete,

I’ll give that a go this weekend.

Ray

[AdieJAM]

Sorry to go off topic here !

@raybb3uk Ray - we have a holiday home on the beach front in Brean in Somerset in the UK and just by looking at the Sand and sea that looks like Brean beach in that link your posted!!! - yes I know there are probably hundreds of thousands of beaches In the world that look the same !!! But soon as I saw the sand and sea, reminded of it !

[raybb3uk]

Hi,

Not sure where it’s located. If it’s the background image, it’s from UnSplash. The video was provided by the customer, so unsure where that might be

Ray