Allow adding custom class to video tag

[web-programmer-here]

Is it possible to allow the option to add class names to the video tag? I want to make the video full width and I want to pass the class which makes the video full screen.

maybe <AdvancedVideo className="min-w-full" ... >

[atdcloud]

Hi @web-programmer-here,

Correct, you may use className="customClass" attribute and that will be rendered in the element. Example on my codesandbox: https://codesandbox.io/s/cld-react-sdk-docs-examples-forked-0335uq?file=/src/components/Videos.jsx:1833-2032

I hope that helps.

[web-programmer-here]

@atdcloud thanks, oh I see, I got an error saying "Property 'className' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'" and I thought you can't pass the class

Type '{ cldVid: CloudinaryVideo; plugins: Plugin[]; className: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<AdvancedVideo> & Readonly<VideoProps>'.
  Property 'className' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<AdvancedVideo> & Readonly<VideoProps>'.ts(2322)

[tamaracloudinary]

Hi @web-programmer-here, do you have any further questions or can I close this thread? Thanks -Tamara

[web-programmer-here]

@tamaracloudinary Thanks, yes, I think there are some missing types (potential bug?), that is why eslint gives error and can't build the site.

I think it should be added here if I am correct

https://github.com/cloudinary/frontend-frameworks/blob/master/packages/react/src/AdvancedVideo.tsx#L13

interface VideoProps {
  cldVid: CloudinaryVideo,
  plugins?: Plugins,
  sources?: VideoSources,
...

[tamaracloudinary]

@web-programmer-here, would you like to make a PR and we will review it?

[tamaracloudinary]

@web-programmer-here Hi, one of our devs will take it in the next sprint, you will know here once it's done :)