Low Code Responsive Cloudinary Videos

This library provides a simple way to implement responsive Cloudinary videos with lazy loading support. It utilizes Cloudinary's powerful image and video transformation features to optimize video delivery based on the viewport size.

Attributes and Behaviors

Attribute	Required	Description
r-video_element	Yes	Specifies the element that contains the video. Value can be "viewport" for window width or "self" for element width.
r-video_id	Yes	The ID of the Cloudinary video.
r-video_breakpoints	Optional	Comma-separated list of breakpoints in the format "minWidth/videoWidth". Defaults to predefined values if not specified.
r-video_cloud-name	Optional	Cloudinary account's cloud name. If not provided, it should be set on an element with the attribute "r-video_cloud-name".
r-video_autoformat	Optional	Enables or customizes Cloudinary's automatic video format conversion. Default is "f_auto".
r-video_autoquality	Optional	Enables or customizes Cloudinary's automatic video quality adjustment. Default is "q_auto".
r-video_lazy-load	Optional	Enables lazy loading of the video. Default is false.
r-video_autoposter	Optional	Automatically generates a poster image for the video. If not provided, the library generates it based on the video's width.

Cloudinary Transformers

Cloudinary transformers allow dynamic transformation of images and videos. This library utilizes these transformers to adjust video format, quality, and size based on the viewport or element width.

Finding Cloud Name and Video IDs in Cloudinary

Cloud Name: The cloud name associated with your Cloudinary account can be found in the Cloudinary dashboard settings.
Video IDs: Each video uploaded to Cloudinary is assigned a unique ID. You can find the video ID in the Cloudinary dashboard or via API.

Implementing Responsive Cloudinary Videos in Webflow

To implement a responsive Cloudinary video in Webflow, use custom elements with a <video> tag. Optionally, you can create a <source> tag inside the <video> element, although it will be auto-generated by the library if not provided.

Lazy Loading Support

This library supports lazy loading of videos. You can integrate it with lazy loading libraries like vanilla-lazyload for efficient loading of videos based on user interactions.

riverey / low-code-responsive-cloudinary-video Goto Github PK