CldVideoPlayer fullscreen object-cover issue

[apetta]

I'm having a challenge getting a full-screen video with object-cover to work with CldVideoPlayer in nextjs 14. I think the styles from next-cloudinary/dist/cld-video-player.css may be causing an issue here. A regular video element works as expected.

The poster image correctly sizes itself, but the video refuses to fill the container.

This is on "next-cloudinary": "~5.20.0"

[colbyfayock]

hey @apetta can you share the code you're trying to use and an example of what you're trying to achieve?

[apetta]

@colbyfayock Sure thing! Here's a repo with the issue

You can see the issue on a desktop viewport.

Desired layout:

With next-cloudinary:

Thank you!

[colbyfayock]

thanks for the example, that was really helpful

i think this is currently simply not supported natively. I'm currently wrapping the player with an aspect ratio'ed container in order to provide better responsiveness and id imagine that's certainly preventing this ability

looking into the issue itself though, the video player uses videojs under the hood, and found some potential solutions here: https://github.com/videojs/video.js/issues/3431

id be happy to rethink that and add this capability, but currently working on wrapping up a major release, so would need to be once im through with that: https://github.com/cloudinary-community/next-cloudinary/pull/407

that said, i think there are two options in the meantime:

• you may be able to figure out a hacky solution using absolute positioning or a little javascript to make a video fill its container and hide the overflow

along the lines of:

<div that fills the container and hides overflow>
  <CldVideoPlayer
</div>

• or you could use getCldVideoUrl to generate the URL and use the native video tag, though im unsure if there are specific features with the Video Player you're hoping to maintain

https://next.cloudinary.dev/getcldvideourl/basic-usage

[apetta]

@colbyfayock Thanks for looking into this, glad to know I wan't missing something obvious.

I think the getCldVideoUrl approach should be okay for my current application. It would be great to have this capability for future use though.

Another blocker even if I found a hacky layout, is setting the disableRemotePlayback prop via CldVideoPlayer - couldn't find any docs on this! (Can open another issue if needed)

[colbyfayock]

yeah im thinking that because im not exposing anything that allows you to modify the video element that won't be possible

yes please, can you create a new Issue for that one?

[Zakisb]

hey @apetta did you find a solution? i'm having the same issue right now !

[apetta]

hey @apetta did you find a solution? i'm having the same issue right now !

Hey, I think I just generated the URL and used a custom video element in the end