Video synced to Mux from /videos folder has black letterboxing added

[henrybabbage]

Hello,

I'm having an issue with a video that I have added to the /videos directory and synced to Mux now having black letterboxing where there was none before. Any idea what could be causing this or how to target this with CSS? I have tried to add objectFit: cover and similar solutions without any luck. I also don't understand why the video asset had black letterbox bars added to the top and bottom of the video when it was uploaded to Mux. Is this normal?

Grateful for any tips and feedback, thank you.

Nothing unusual about my implementation:

// VideoPlayer.tsx

import Video from 'next-video'
import hero from '/videos/jellyfish.mov'

export default function VideoPlayer() {
	return <Video src={hero} controls={false} autoPlay muted loop />
}

// HomePage.tsx

/* unrelated code */

<div className='max-w-[50rem] w-full h-full'>
	<VideoPlayer />
</div>

/* unrelated code */

// globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Reset default styles */
* {
    /* Include padding and border in size calculation. */
    box-sizing: border-box;
    /* Position based on immediate parent and allow adjusting top/right/bottom/left */
    position: relative;
    /* Prevent grid and flex items from spilling out of their container. */
    min-width: 0;
}

body {
    /* Ensure that the body fills the entire viewport. */
    min-height: 100dvh;
}

h1, h2, h3, h4 {
    /* Balance headings across multiple lines into an even block. */
    text-wrap: balance;
}

p {
    /* Prevent text orphans (single words on last line). */
    text-wrap: pretty;
}

/* Allow images to be responsive. */
img {
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
}

Screenshot of the letterboxing in the image below:

[luwes]

could you try changing the CSS aspect-ratio on the video? NextVideo adds a default aspect-ratio of 16 / 9.

[henrybabbage]

that worked thank you! With !important added.