Padding for rest video design allowing very wide gap with below component

Hi Guys,

I’m building the landing page and added a youtube video which happens to respond to browser width. To maintain the aspect ratio, I gave padding-bottom: 56.25%;. Now this is adding a lot of gap between video frame and the component sitting below. Also I do not want the video to go full size in full size browser window hence gave the video frame a fixed width when browser goes above 600px.

Here is the code https://codesandbox.io/s/landing-page-fcc-jbb89

Is there a way to maintain the responsive video design without creating a wide gap between video and other elements around it?

What if you remove the padding from .video & remove position from .video-frame ?

If it looks the way you want on larger devices but breaks the video on the smaller sizes, you’ll want to add it back into the media query. I’m guessing the padding of 56% was to keep the video aspect-ratio on small screens?

1 Like

It worked. Thanks @pjonp. I realized we don’t need the padding in video element, only for mobile devices.