A WebComponent for Cloudinary Video Player

This WebComponent allows you to embed the Cloudinary Video Player to your application.

As Cloudinary Video Player third party library does not expose anything and scope directly the main object to window, you must include the following tags in your HTML:

<link href="node_modules/cloudinary-video-player/dist/cld-video-player.min.css" rel="stylesheet">

<script src="node_modules/lodash/lodash.js" type="text/javascript"></script>
<script src="node_modules/cloudinary-core/cloudinary-core.js" type="text/javascript"></script>
<script src="node_modules/cloudinary-video-player/dist/cld-video-player.min.js" type="text/javascript"></script>

or CDN version

<link href="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.css" rel="stylesheet">

<script src="https://unpkg.com/cloudinary-core/cloudinary-core-shrinkwrap.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.js" type="text/javascript"></script>

Please refer to the official Cloudinary Video Player API documentation or npm package for more information.

If Cloudinary library has not loaded correctly on your page, the video player will load the native HTML5 video player of your browser as fallback.

That is why it is necessary to add the url-transformation="w_940,h_354,c_limit" attribute.

Component Attributes

See accepted attributes.

Using this component

<cld-video cloud-name="lightways" url-transformation="w_940,h_354,c_limit" video-id="video-123" video-title="My great video" public-id="folder/cl_public_id" width=940 height=354 crop="limit" controls></cld-video>

Script tag

• Put a script tag similar to this <script src='https://unpkg.com/[email protected]/dist/cld-video.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install stencil-cloudinary-video-player --save
• Put a script tag similar to this <script src='node_modules/stencil-cloudinary-video-player/dist/cld-video.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install stencil-cloudinary-video-player --save
• Add an import to the npm packages import stencil-cloudinary-video-player;
• Then you can use the element anywhere in your template, JSX, html etc