### Recommended Performant Video Player Setup Source: https://cloudinary.com/documentation/programmable_media_release_notes Integrates the Cloudinary Video Player with lazy loading and breakpoints for optimal performance. Ensure the player CSS and JS are included, and initialize the player with your cloud name and public ID. ```html ``` -------------------------------- ### Smooth Scrolling Example Source: https://cloudinary.com/products/video This snippet demonstrates smooth scrolling functionality, likely for UI enhancements. ```javascript 'smooth' // Smooth scrolling }); }); }); /* */ (function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a0fb8bf0bd0055d0',t:'MTc4MjEzNDM4Nw=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})(); ``` -------------------------------- ### Upload from Azure Blob Storage Container Source: https://cloudinary.com/documentation/programmable_media_release_notes Examples demonstrate how to upload assets directly from a private Azure Blob Storage container using various Cloudinary SDKs and the cURL command. ```ruby Cloudinary::Uploader.upload("azure://your-tenant-id:mystorageaccount@mycontainer/sample.jpg") ``` ```php $cloudinary->uploadApi()->upload("azure://your-tenant-id:mystorageaccount@mycontainer/sample.jpg"); ``` ```python cloudinary.uploader.upload("azure://your-tenant-id:mystorageaccount@mycontainer/sample.jpg") ``` ```nodejs cloudinary.v2.uploader .upload("azure://your-tenant-id:mystorageaccount@mycontainer/sample.jpg") .then(result=>console.log(result)); ``` ```java cloudinary.uploader().upload("azure://your-tenant-id:mystorageaccount@mycontainer/sample.jpg", ObjectUtils.emptyMap()); ``` ```csharp var uploadParams = new ImageUploadParams(){ File = new FileDescription(@"azure://your-tenant-id:mystorageaccount@mycontainer/sample.jpg")}; var uploadResult = cloudinary.Upload(uploadParams); ``` ```go resp, err := cld.Upload.Upload(ctx, "azure://your-tenant-id:mystorageaccount@mycontainer/sample.jpg", uploader.UploadParams{}) ``` ```curl curl https://api.cloudinary.com/v1_1//image/upload -X POST --data 'file=azure://your-tenant-id:mystorageaccount@mycontainer/sample.jpg×tamp=173719931&api_key=&signature=' ``` ```cli cld uploader upload "azure://your-tenant-id:mystorageaccount@mycontainer/sample.jpg" ``` -------------------------------- ### Transformation URL API Source: https://cloudinary.com/documentation/cloudinary_references Details all available URL transformation parameters for both images and videos, including complete syntax details plus URL & SDK code examples. ```APIDOC ## Transformation URL API ### Description Details all available URL transformation parameters for both images and videos, complete syntax details plus URL & SDK code examples. ### Endpoint [See Cloudinary documentation for specific endpoints] ### Parameters [See Cloudinary documentation for specific parameters] ``` -------------------------------- ### Initialize Cloudinary Video Player Source: https://cloudinary.com/products/video Initializes a Cloudinary video player with specified configuration options. Ensure the Cloudinary SDK is loaded before using this. ```javascript document.addEventListener('DOMContentLoaded', () => { const player = cloudinary.player('video-player', { cloudName: 'cloudinary-marketing', publicId: 'Cloudinary-Video_2025-Update', logoImageUrl: "https://cloudinary-res.cloudinary.com/image/upload/c_scale,w_200/r_max/docsite/brand-assets/cloudinary_favicon_32x32.png", aiHighlightsGraph: true, chapters: true, textTracks: { subtitles: [ { label: 'Transcript', default: true } ] } }); }); ``` -------------------------------- ### Provisioning API Source: https://cloudinary.com/documentation/cloudinary_references Details all available methods for CRUD and other management operations on product environments, users, user groups, and API keys. ```APIDOC ## Provisioning API ### Description Details all available methods for CRUD and other management operations on product environments, users, user groups, and API keys. ### Endpoint [See Cloudinary documentation for specific endpoints] ### Parameters [See Cloudinary documentation for specific parameters] ``` -------------------------------- ### Admin API Source: https://cloudinary.com/documentation/cloudinary_references Details all available methods for bulk managing assets (search, retrieval, updating details, etc.) as well as CRUD management of other product environment entities, such as folders, metadata, webhooks, upload presets, mappings, etc. ```APIDOC ## Admin API ### Description Details all available methods for bulk managing assets (search, retrieval, updating details, etc.) as well as CRUD management of other product environment entities, such as folders, metadata, webhooks, upload presets, mappings, etc. ### Endpoint [See Cloudinary documentation for specific endpoints] ### Parameters [See Cloudinary documentation for specific parameters] ``` -------------------------------- ### Navigate to Cloudinary Demos and Documentation Source: https://cloudinary.com/products/image Event listeners attached to specific DOM elements that redirect the user to different Cloudinary demo pages or documentation sections when clicked. ```javascript function() { window.location.href = 'https://ai.cloudinary.com/demos/recolor'; }); document.querySelector("#editing-features .items > .item:nth-child(2)").addEventListener('click', function() { window.location.href = 'https://cloudinary.com/documentation/cloudinary_ai_background_removal_addon'; }); document.querySelector("#editing-features .items > .item:nth-child(3)").addEventListener('click', function() { window.location.href = 'https://demo.cloudinary.com/product-gallery/'; }); document.querySelector("#editing-features .items > .item:nth-child(4)").addEventListener('click', function() { window.location.href = 'https://cloudinary.com/documentation/effects_and_artistic_enhancements#dropshadow_effect'; }); }); ``` -------------------------------- ### Navigate to Shoppable Videos Documentation Source: https://cloudinary.com/products/video This JavaScript code snippet adds a click event listener to a specific element, redirecting the user to the Cloudinary shoppable videos documentation. ```javascript document.querySelector("#cloudinary-ai-features .items > .item:nth-child(5)").addEventListener('click', function() { window.location.href = 'https://cloudinary.com/documentation/video_player_shoppable_videos#banner'; }); ``` -------------------------------- ### Navigate to Adaptive Bitrate Demo Source: https://cloudinary.com/products/video This JavaScript code snippet adds a click event listener to a specific element, redirecting the user to the Cloudinary adaptive bitrate demo page. ```javascript document.querySelector("#ugc-features .items > .item:nth-child(1)").addEventListener('click', function() { window.location.href = 'https://videoapi.cloudinary.com/video-demo/adaptive-bitrate'; }); ``` -------------------------------- ### Media Library Widget: No API key required Source: https://cloudinary.com/documentation/digital_asset_management_release_notes Authentication for the Media Library widget is now optional, requiring only the Cloud Name. While API keys can still be included for enhanced security, they are no longer mandatory for authentication. ```APIDOC ## Media Library Widget: No API key required ### Description Developers can now use the Media Library widget without a mandatory API key for authentication. Authentication can be done solely using the Cloud Name, with API keys being optional for enhanced security and validation. ### Method Not specified (Widget configuration) ### Endpoint Not specified ### Parameters None specified. ### Request Example None specified. ### Response None specified. ``` -------------------------------- ### Cloudflare Challenge Platform Script Initialization Source: https://cloudinary.com/tou Initializes Cloudflare's challenge-platform scripts, likely for security or performance checks, by dynamically creating and appending script tags. ```javascript var ajaxEvents = {"ajax_url":"https:\/\/cloudinary.com\/wp-admin\/admin-ajax.php"}; (function(){ function c(){ var b=a.contentDocument||a.contentWindow.document; if(b){ var d=b.createElement('script'); d.innerHTML="window.__CF$cv$params={r:'a0fb8bf23a3755d0',t:'MTc4MjEzNDM4Nw=='};"; var a=document.createElement('script'); a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js'; b.getElementsByTagName('head')[0].appendChild(a); } } if(document.body){ var a=document.createElement('iframe'); a.height=1; a.width=1; a.style.position='absolute'; a.style.top=0; a.style.left=0; a.style.border='none'; a.style.visibility='hidden'; document.body.appendChild(a); if('loading'!==document.readyState)c(); else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c); else{ var e=document.onreadystatechange||function(){}; document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c()) } } }})(); ``` -------------------------------- ### Link to AI Features Demos Source: https://cloudinary.com/products/image These JavaScript snippets add click event listeners to specific elements to redirect users to various Cloudinary AI feature demonstration pages. ```javascript document.querySelector("#cloudinary-ai-features .items > .item:nth-child(1)").addEventListener('click', function() { window.location.href = 'https://demo.cloudinary.com/auto-quality'; }); document.querySelector("#cloudinary-ai-features .items > .item:nth-child(2)").addEventListener('click', function() { window.location.href = 'https://cloudinary.com/demo/c_auto'; }); document.querySelector("#cloudinary-ai-features .items > .item:nth-child(3)").addEventListener('click', function() { window.location.href = 'https://cloudinary.com/demo/c_auto'; }); document.querySelector("#cloudinary-ai-features .items > .item:nth-child(4)").addEventListener('click', function() { window.location.href = 'https://demo.cloudinary.com/multi-cdn'; }); ``` -------------------------------- ### Link to UGC Features Demos Source: https://cloudinary.com/products/image These JavaScript snippets add click event listeners to specific elements to redirect users to various Cloudinary User-Generated Content (UGC) feature demonstration pages. ```javascript document.querySelector("#ugc-features .items > .item:nth-child(1)").addEventListener('click', function() { window.location.href = 'https://ai.cloudinary.com/demos/restore'; }); document.querySelector("#ugc-features .items > .item:nth-child(2)").addEventListener('click', function() { window.location.href = 'https://demo.cloudinary.com/uw/#/'; }); document.querySelector("#ugc-features .items > .item:nth-child(3)").addEventListener('click', function() { window.location.href = 'https://cloudinary.com/demo/upscale'; }); document.querySelector("#ugc-features .items > .item:nth-child(4)").addEventListener('click', function() { window.location.href = 'https://ai.cloudinary.com/demos/fill'; }); document.querySelector("#ugc-features .items > .item:nth-child(5)").addEventListener('click', function() { window.location.href = 'https://ai.cloudinary.com/demos/fill'; }); document.querySelector("#ugc-features .items > .item:nth-child(6)").addEventListener('click', function() { window.location.href = 'https://ai.cloudinary.com/demos/remove'; }); ``` -------------------------------- ### Navigate to Image to Video Demo Source: https://cloudinary.com/products/video This JavaScript code snippet adds a click event listener to a specific element, redirecting the user to the Cloudinary image to video demo page. ```javascript document.querySelector("#cloudinary-ai-features .items > .item:nth-child(6)").addEventListener('click', function() { window.location.href = 'https://videoapi.cloudinary.com/video-demo/image-to-video'; }); ``` -------------------------------- ### Navigate to Cloudinary Video Player Documentation Source: https://cloudinary.com/products/video This JavaScript code snippet adds a click event listener to a specific element, redirecting the user to the Cloudinary video player documentation. ```javascript document.querySelector("#ugc-features .items > .item:nth-child(2)").addEventListener('click', function() { window.location.href = 'https://cloudinary.com/documentation/cloudinary_video_player#banner'; }); ``` -------------------------------- ### Cloudflare Challenge Platform Script Initialization Source: https://cloudinary.com/products/mediaflows Initializes the Cloudflare challenge-platform script by creating and appending an iframe and a script tag to the document's head. ```javascript (function(){ function c(){ var b=a.contentDocument||a.contentWindow.document; if(b){ var d=b.createElement('script'); d.innerHTML="window.__CF$cv$params={r:'a0fb8bf17faa55d0',t:'MTc4MjEzNDM4Nw=='};"; var a=document.createElement('script'); a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js'; b.getElementsByTagName('head')[0].appendChild(a); } } if(document.body){ var a=document.createElement('iframe'); a.height=1; a.width=1; a.style.position='absolute'; a.style.top=0; a.style.left=0; a.style.border='none'; a.style.visibility='hidden'; document.body.appendChild(a); if('loading'!==document.readyState)c(); else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c); else{ var e=document.onreadystatechange||function(){}; document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c()) } } }})(); ``` -------------------------------- ### Navigate to Video Smart Cropping Demo Source: https://cloudinary.com/products/video This JavaScript code snippet adds a click event listener to a specific element, redirecting the user to the Cloudinary video smart cropping demo page. ```javascript document.querySelector("#cloudinary-ai-features .items > .item:nth-child(2)").addEventListener('click', function() { window.location.href = 'https://videoapi.cloudinary.com/video-demo/video-smart-cropping'; }); ``` -------------------------------- ### Navigate to Video Optimization Demo Source: https://cloudinary.com/products/video This JavaScript code snippet adds a click event listener to a specific element, redirecting the user to the Cloudinary video optimization demo page. ```javascript document.querySelector("#cloudinary-ai-features .items > .item:nth-child(1)").addEventListener('click', function() { window.location.href = 'https://videoapi.cloudinary.com/video-demo/video-optimization'; }); ``` -------------------------------- ### Link to Editing Features Demos Source: https://cloudinary.com/products/image This JavaScript snippet adds a click event listener to a specific element to redirect users to a Cloudinary editing feature demonstration page. ```javascript document.querySelector("#editing-features .items > .item:nth-child(1)").addEventListener('click', ``` -------------------------------- ### Navigate to Moderate Assets Documentation Source: https://cloudinary.com/products/video This JavaScript code snippet adds a click event listener to a specific element, redirecting the user to the Cloudinary moderate assets documentation. ```javascript document.querySelector("#editing-features .items > .item:nth-child(3)").addEventListener('click', function() { window.location.href = 'https://cloudinary.com/documentation/moderate_assets'; }); ``` -------------------------------- ### Cloudflare Challenge Platform Script Initialization Source: https://cloudinary.com/trust/aup This script is part of the Cloudflare challenge platform, responsible for initializing security checks and scripts. It dynamically creates and appends a script tag to the document's head. ```javascript (function(){ function c(){ var b=a.contentDocument||a.contentWindow.document; if(b){ var d=b.createElement('script'); d.innerHTML="window.__CF$cv$params={r:'a0fb8bf27b3155d0',t:'MTc4MjEzNDM4Nw=='};\nvar a=document.createElement('script');\na.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';\ndocument.getElementsByTagName('head')[0].appendChild(a);"; b.getElementsByTagName('head')[0].appendChild(d); } } if(document.body){ var a=document.createElement('iframe'); a.height=1; a.width=1; a.style.position='absolute'; a.style.top=0; a.style.left=0; a.style.border='none'; a.style.visibility='hidden'; document.body.appendChild(a); if('loading'!==document.readyState)c(); else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c); else{ var e=document.onreadystatechange||function(){}; document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c()) } } }})(); ``` -------------------------------- ### Add Link to Resources Heading Source: https://cloudinary.com/products/mediaflows Appends a 'See All →' link to the resources feed heading on DOMContentLoaded. ```javascript document.addEventListener('DOMContentLoaded', () => { const target = document.querySelector('.resources_feed_module_heading--title'); if (target) { const newDiv = document.createElement('div'); newDiv.innerHTML = 'See All →'; target.appendChild(newDiv); } }); ``` -------------------------------- ### Navigate to Video Overlays Demo Source: https://cloudinary.com/products/video This JavaScript code snippet adds a click event listener to a specific element, redirecting the user to the Cloudinary video overlays demo page. ```javascript document.querySelector("#cloudinary-ai-features .items > .item:nth-child(3)").addEventListener('click', function() { window.location.href = 'https://cloudinary.com/demo/video-overlays'; }); ``` -------------------------------- ### Autocomplete Search Implementation Source: https://cloudinary.com/platform This JavaScript code initializes an Algolia-powered autocomplete search interface. It requires the Algolia search client and the '@algolia/autocomplete-js' library. Configure it with your Algolia App ID, API key, and index name. ```javascript window.addEventListener('DOMContentLoaded', function() { // algolia const searchClient = algoliasearch('R9DBD0Z6LA', '9ed92218d0e27f5749c6a6746069009f'); const { autocomplete, getAlgoliaResults } = window['@algolia/autocomplete-js']; autocomplete({ container: '#autocomplete', placeholder: 'Search for...', openOnFocus: true, getSources({ query, setContext }) { if (!query) { return []; // No results until the user starts typing } return [ { sourceId: 'blogPosts', // Optional tag in case of multiple sources getItems({ query }) { return getAlgoliaResults({ searchClient, queries: [ { indexName: 'cloudinary_com_r9dbd0z6la_pages', params: { query, hitsPerPage: 50, }, }, ], transformResponse({ results, hits }) { setContext({ nbPosts: results[0].nbHits }); return hits; }, }); }, templates: { header() { // return 'Suggestions'; }, item({ item, components, html }) { return html `${components.Highlight({ hit: item, attribute: 'title' })}`; }, footer({ html, state }) { return html ` See all results`; }, }, }, ]; }, }); }); ``` -------------------------------- ### Overlay Text with Google Font in C# Source: https://cloudinary.com/documentation/programmable_media_release_notes Build an image tag with a text overlay transformation. Use `TextLayer` for text properties and specify offsets for positioning. ```csharp cloudinary.Api.UrlImgUp.Transform(new Transformation() .Color("white").Overlay(new TextLayer().FontFamily("google").FontSize(80).Text("Enjoy%20luxury")).Chain() .Flags("layer_apply").X(-40).Y(-90)).BuildImageTag("docs/fine_hotel_room") ``` -------------------------------- ### Analyze API (Beta) Source: https://cloudinary.com/documentation/cloudinary_references Details all available methods for AI-based asset analysis, such as object detection, automatic tagging, and delivering detailed insights, based on the analysis type requested. ```APIDOC ## Analyze API (Beta) ### Description Details all available methods for AI-based asset analysis, such as object detection, automatic tagging, and delivering detailed insights, based on the analysis type requested. ### Endpoint [See Cloudinary documentation for specific endpoints] ### Parameters [See Cloudinary documentation for specific parameters] ``` -------------------------------- ### Navigate to Video Previews Demo Source: https://cloudinary.com/products/video This JavaScript code snippet adds a click event listener to a specific element, redirecting the user to the Cloudinary video previews demo page. ```javascript document.querySelector("#cloudinary-ai-features .items > .item:nth-child(4)").addEventListener('click', function() { window.location.href = 'https://videoapi.cloudinary.com/video-demo/video-previews'; }); ``` -------------------------------- ### Video Config API Source: https://cloudinary.com/documentation/cloudinary_references Details all available methods for managing per-video player configurations, including retrieving and updating settings for individual video assets. ```APIDOC ## Video Config API ### Description Details all available methods for managing per-video player configurations, including retrieving and updating settings for individual video assets. ### Endpoint [See Cloudinary documentation for specific endpoints] ### Parameters [See Cloudinary documentation for specific parameters] ``` -------------------------------- ### Overlay Text with Google Font in PHP Source: https://cloudinary.com/documentation/programmable_media_release_notes Use the `Overlay` and `Source` classes to add text overlays. Specify the Google font and apply positioning offsets. ```php use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\Source; use Cloudinary\Transformation\Position; use Cloudinary\Transformation\TextStyle; (new ImageTag('docs/fine_hotel_room')) ->overlay(Overlay::source( Source::text("Enjoy luxury",(new TextStyle("Gravitas One@google",80))) ->textColor(Color::WHITE) ) ->position((new Position())->offsetX(-40) ->offsetY(-90)) ); ```