Responsive issue with ScriptYouTubePlayer component

[Youhan]

🐛 The bug

Hi team!

The ScriptYouTubePlayer component accepts width and height (or defaults to 640 and 480). From that it calculates aspect-ratio and then sets these styles on it

maxWidth: '100%',
width: `${props.width}px`,
height: 'auto',
aspectRatio: `${props.width}/${props.height}`,

This could potentially cause some responsive troubles when it is inside a container that has min-width:auto like a grid column.
I am providing a reproduction showing it.
The issue on the reproduction can be solved by adding min-w-0 to the grid cols, as the grid cols by default want to follow the width of their content, their default is min-width: auto.

🛠️ To reproduce

https://stackblitz.com/edit/nuxt-starter-s1pw6n?file=app.vue

🌈 Expected behavior

As a possible solution, I am wondering if the following could be a friendlier?

minWidth: 100px, // to have minimum width
width: `100%`;
height: `auto`;
aspectRatio: `${props.width}/${props.height}`,

Also we could let the user handle the width and height and just get the aspect ratio in the props?

ℹ️ Additional context

No response

[codeflorist]

I would also suggest to set width always to 100% and let the user control the width (or maximum width) of the video via it's parent container.

Currently this is a workaround:

<ScriptYouTubePlayer  :root-attrs="{ style: { width: '100%' } }">

[devinschumacher]

And what about the "object:contain" vs. "object:cover" situation?

mine is defaulting to object:contain which makes it look wonky