How to immediately display the player in normal size.

[abvas]

Hey!

Thanks for your work. Congratulations on the release of the beta version.

I have a question. I created an example: https://codepen.io/abvas/pen/dyJbopx Before uploading the video, I first see (I don't know what to call it) a small rectangle (300x150) with controls. This is clearly visible when we transfer invalid video address (dropdown point 3) And after the video is loaded, a player of normal size appears.

There is a dropdown above the player. Try toggling dropdown values. Tell me how can I get rid of this first small element (300x150) so that the normal size player is immediately visible?

The same connection scheme for Vime worked fine. Here is an example: https://codepen.io/abvas/pen/MWrgaQg

Thanks.

[mihar-22]

Hey @abvas!

This is due to the fact that the intristic width of the video is not known until it has loaded. There are three options to avoid this:

• Option 1: Use an aspect ratio container: https://www.vidstack.io/docs/player/components/ui/aspect-ratio.
• Option 2: If you know the video width/height before-hand you can set it directly on the element (this means each video will have different dimensions so you might prefer the aspect ratio container):

<vds-video-player width="768" height="431">

• Option 3: You could also set the width of the video player to 100% with CSS and then mess with object-fit property of the video to get the desired outcome:

vds-video-player {
  width: 100%;
}

vds-video-player::part(video) {
  object-fit: cover;
}

[mihar-22]

If the intrinsic aspect ratio of your video doesn't match the aspect ratio container you'll need to also set the object-fit property as shown above.

I'm going to add all this info to the docs.

[abvas]

Hey!

Oh, it's my fault. I didn't read the documentation carefully enough. The best option is using the aspect ratio container. I checked and it works as I expected.

Thank you very much.