Skip to content

Bug: Extra bottom padding in React Mux Player #452

Answered by luwes
ywong-cais asked this question in Q&A
Discussion options

You must be logged in to vote

Thanks for the feedback @ywong-cais!

This might feel a bit counter intuitive but the <mux-player> element has an intentional display CSS property as inline-block.
It's to keep it more aligned with how the native <video> element behaves.

The good news is that if you don't like the video player to behave as an inline element, simply set the display property to block.
e.g. <MuxPlayerReact style={{ display: 'block' }} />

That should remove the extra padding at the bottom.


Also it's recommended that you define explicit dimensions to your player to avoid cumulative layout shift.
See the docs for more info https://docs.mux.com/guides/video/mux-player-customize-look-and-feel#aspect-ratio

Hope th…

Replies: 1 comment

Comment options

You must be logged in to vote
0 replies
Answer selected by dylanjha
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
question Further information is requested
2 participants
Converted from issue

This discussion was converted from issue #450 on October 07, 2022 16:23.