[Bug] Getting warning when using CldVideoPlayer

[miticm]

Bug Report

Describe the bug

I am getting this warning when using CldVideoPlayer, can we improve this?
Do not add stylesheets using next/head (see tag with href="https://unpkg.com/[email protected]/dist/cld-video-player.min.css"). Use Document instead.
See more info here: https://nextjs.org/docs/messages/no-stylesheets-in-head-component

Is this a regression?

no

Steps To Reproduce the error

1. import CldVideoPlayer and use it
2. go to browser panel to see this warning

Expected behaviour

No warning and use the recommended way

CodeSandbox or Live Example of Bug

Screenshot or Video Recording

Your environment

• OS:
• Node version:
• Npm version:
• Browser name and version: Chorme

Additional context

[colbyfayock]

hey @miticm - yeah, its currently the solution i have to add the required stylesheet to the component

ive been trying to find other ways to handle this. importing from the node module doesnt work for instance, as thats explicitly not allowed by nextjs

i'm not quite sure on how to fix this without requiring the user to include it themselves

in this PR i've actually added an option to exclude the stylesheet: https://github.com/colbyfayock/next-cloudinary/pull/181/files#diff-a55bcf836522ca3b2611e1c71bf0dd0ac5ea8a13832d57f433ac9bd75f487515R15

not particularly because of this reason, but in Next.js 13 App directory, Head component doesnt work

any thoughts or ideas on this?

[miticm]

Wow, thanks for the quick response, yeah as you mentioned, there is no good way to handle this right now, I would include it myself and use the option to exclude the stylesheet.

[miticm]

Hi there @colbyfayock, I have users based in China, and the unpkg.com is blocked there, is there an option to add cld-video-player.min.js and cld-video-player.min.css manually so that I can make the video player load?

[colbyfayock]

hey @miticm thats a good question, haven't ran into this issue before

i dont believe there would be a way for me to manually provide a way to include the .js file, though there is already a CSS file available to be imported, but doesnt help without the JS

there are a few options that immediately come to mind:

• I was already working on changing how we load the video player and instead of using the CDN scripts, import the npm module: Dynamic Imports for Video Player #181

The issue with this though is that the web.dev/measure metrics take a little bit of a hit due to the amount of JS getting loaded. I think this is still probably the "right" option for me to continue exploring this and figure it out in a way that provides a better mechanism for interfacing with the video player code while avoiding issues like this

• you can manually set up the video player within your app by either copying the components into your project, then referencing a local file: https://github.com/cloudinary-community/next-cloudinary/tree/main/next-cloudinary/src/components/CldVideoPlayer

this obviously isn't ideal, but its an escape hatch if we can't figure out a different solution

• there's also the option of adding teh video player as an iFrame:
  • https://www.youtube.com/watch?v=9UkPwO9BrJs
  • https://studio.cloudinary.com/ can help you set the player up, then you can select "embed" as the option (or us the JS snippet provided)

again, not ideal, but another solution until the first option is resolved

---

in the meantime i've flagged this internally, but given i haven't hit this before, im not sure if this is just "how it is" with CDN's and China or not but if I get anymore information regarding that, I'll share here