CODEWITHSUNDEEP
javascripthtmlcssreactjs
codeLearnerrr
codeLearnerrr

Reputation: 300

Unable to fill div with video in React js

The goal

The goal is to reproduce this home page from meet up, where the video is placed bellow the navbar.

The issue

Different from images, videos are difficult to tame inside the div element. The aspect ratio is kept, but the video leaves white spaces in the div. As far as i know, object-fit is only supported by 'traditional' html. The attempts to make it work in React js object-fit failed. How to fully fill a div with a video tag in React js?

Link to code sandbox https://codesandbox.io/s/react-video-sandbox-forked-drm8o?file=/src/index.js

Thanks for reading!

Upvotes: 1

Views: 2115

Answers (1)

noahro
noahro

Reputation: 599

If I understood your goal correctly, then this might be what you want:
https://codesandbox.io/s/react-video-sandbox-forked-8lkmj?file=/src/index.js

I basically just tried to copy what meetup does.
To do this we don't need to use object-fit.
We can just write some regular CSS styling to achieve this.

To remove the white spaces you had, I just let the video wrapper element be 100% of the parent size (width & height), and then centered the video with flex-box.

I tried to add some descriptive comments to my fork of your codesandbox.

Upvotes: 1

Related Questions