Bug: Extra bottom padding in React Mux Player #452
-
Checklist
Which Mux Elements/Packages has a bug?mux-player-react Which browser(s) are you using?Chrome Version 105.0.5195.125 Which operating system(s) are you using?(For example: macOS, Windows, iOS, Android) How are you using Mux Elements?yarn install Describe the bugTrying to give the player a border radius by using a wrapper div with following styles
but there is a white padding below the player. Steps To Reproduce
Link to code example: The current behaviorplayer has bottom padding The expected behaviorshould have no bottom padding |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
Thanks for the feedback @ywong-cais! This might feel a bit counter intuitive but the The good news is that if you don't like the video player to behave as an 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. Hope this helps! |
Beta Was this translation helpful? Give feedback.
Thanks for the feedback @ywong-cais!
This might feel a bit counter intuitive but the
<mux-player>
element has an intentionaldisplay
CSS property asinline-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 thedisplay
property toblock
.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…