Menu
Products
Products
Video Hosting
Upload and manage your videos in a centralized video library.
Image Hosting
Upload and manage all your images in a centralized library.
Galleries
Choose from 100+templates to showcase your media in style.
Video Messaging
Record, and send personalized video messages.
CincoTube
Create your own community video hub your team, students or fans.
Pages
Create dedicated webpages to share your videos and images.
Live
Create dedicated webpages to share your videos and images.
For Developers
Video API
Build a unique video experience.
DeepUploader
Collect and store user content from anywhere with our file uploader.
Solutions
Solutions
Enterprise
Supercharge your business with secure, internal communication.
Townhall
Webinars
Team Collaboration
Learning & Development
Creative Professionals
Get creative with a built in-suite of editing and marketing tools.
eCommerce
Boost sales with interactive video and easy-embedding.
Townhall
Webinars
Team Collaboration
Learning & Development
eLearning & Training
Host and share course materials in a centralized portal.
Sales & Marketing
Attract, engage and convert with interactive tools and analytics.
"Cincopa helped my Enterprise organization collaborate better through video."
Book a Demo
Resources
Resources
Blog
Learn about the latest industry trends, tips & tricks.
Help Centre
Get access to help articles FAQs, and all things Cincopa.
Partners
Check out our valued list of partners.
Product Updates
Stay up-to-date with our latest greatest features.
Ebooks, Guides & More
Customer Stories
Hear how we've helped businesses succeed.
Boost Campaign Performance Through Video
Discover how to boost your next campaign by using video.
Download Now
Pricing
Watch a Demo
Demo
Login
Start Free Trial
Effective video management in a headless CMS requires workflows that support upload, metadata handling, delivery optimization, and structured content referencing. Unlike traditional CMS platforms, headless systems separate content from presentation, making it essential to manage video assets with explicit control over delivery, security, and rendering on the front end. Uploading Video Files as Static Assets Headless CMS platforms allow you to upload video files via their web UI or API. These are stored as static files and delivered through a CDN. Example: Uploading a Video via Contentful CMA POST /spaces/{space_id}/assets { 'fields': { 'title': { 'en-US': 'Demo Video' }, 'file': { 'en-US': { 'contentType': 'video/mp4', 'fileName': 'demo.mp4', 'upload': 'https://example.com/demo.mp4' } } } } Explanation: POST /spaces/{space_id}/assets: Creates a new asset in Contentful by specifying metadata and an external video file to upload into a specific space. fields.title['en-US'] : Defines the asset's title in English ('Demo Video'), supporting Contentful's locale-based field structure for internationalization. fields.file['en-US'] : Specifies the video file's metadata for the English locale. contentType: 'video/mp4' : Sets the MIME type of the uploaded file, ensuring it's recognized as an MP4 video. fileName: 'demo.mp4' : Defines the filename that will be stored within Contentful. upload: 'https://example.com/demo.mp4' : Provides an external URL from which Contentful will fetch and upload the file asynchronously. Embedding Videos from External Platforms Instead of uploading video files, you can reference hosted videos from platforms like YouTube, Vimeo, or Mux. This offloads bandwidth, enables adaptive streaming, and simplifies playback. Example: Storing an Embed in a Rich Text Field (Contentful) { 'nodeType': 'embedded-entry-block', 'content': [], 'data': { 'target': { 'sys': { 'type': 'Link', 'linkType': 'Entry', 'id': 'videoEntry123' } } } } Explanation : embedded-entry-block : Embeds a referenced Contentful entry (e.g., a video) as a block-level element within a Rich Text field. nodeType: 'embedded-entry-block' : Specifies that the content node is a block-level embedded entry, rendered as a standalone component in the rich text flow. content: [] : Contains no nested content—embedding relies entirely on the referenced entry. data.target.sys : Points to the entry being embedded: type: 'Link' : Indicates this is a link to another Contentful resource. linkType: 'Entry' : Specifies the linked resource is an entry (not an asset or other type). id: 'videoEntry123' : The unique ID of the embedded entry, which can be resolved to fetch its full content (e.g., title, video URL, thumbnail). Structured Content Modeling for Videos In a headless CMS, video content should not be treated as a raw file attachment alone. Instead, it should be modeled as a distinct content type that stores relevant metadata alongside the video reference. This approach improves flexibility, enables richer frontend rendering, and simplifies querying across multiple content types like articles, courses, or product pages. Example: Video Embed Content Type { 'name': 'Video Embed', 'fields': [ { 'id': 'title', 'type': 'Symbol' }, { 'id': 'platform', 'type': 'Symbol' }, { 'id': 'videoUrl', 'type': 'Symbol' }, { 'id': 'duration', 'type': 'Integer' }, { 'id': 'thumbnail', 'type': 'Link', 'linkType': 'Asset' } ] } Explanation: videoUrl: Stores the external platform URL or embed ID. duration and thumbnail: Help display contextual UI elements in the frontend. Video Delivery Considerations When videos are uploaded directly to a headless CMS, they are served as static assets via a content delivery network (CDN). This approach is simple and reliable for lightweight video content but lacks advanced streaming features. Developers must account for these limitations when building video-driven experiences. Example (Contentful CDN URL): https://images.ctfassets.net/{space_id}/{asset_id}/demo.mp4 This is a permanent, public URL used to deliver the original uploaded file as-is. While fast and globally accessible, it does not offer dynamic playback features. Explanation : images.ctfassets.net : Contentful’s global CDN domain for serving both images and binary assets such as videos, ensuring fast and reliable delivery. {space_id} : Unique identifier for the Contentful space that owns the asset. {asset_id} : Unique identifier for the uploaded asset within the space. demo.mp4 : The original filename of the video, preserved for readability and download compatibility. Limitations No adaptive streaming : There is no support for HLS, DASH, or other protocols that adjust video quality based on the viewer's bandwidth. The full video file is streamed in a single quality regardless of device or network conditions. No format fallback or transformation : The CMS does not automatically create additional video formats (e.g., WebM, lower-resolution versions), which means developers must manually ensure compatibility across browsers. No built-in access control : Video URLs are publicly accessible by default, with no signing or token expiration. Anyone with the URL can access the file unless external restrictions are applied. Recommendations for Better Delivery Control Use Mux or Cloudinary : These platforms support adaptive bitrate streaming, automatic format conversion, thumbnail generation, and secure playback URLs. Integrating them with your CMS offloads the complexity of video processing and delivery. Proxy URLs via backend : To restrict access or apply authentication, route video delivery through a backend API that validates the request before serving or redirecting to the video asset. By understanding these delivery constraints and applying external services or proxy logic where needed, you can maintain flexibility while improving video playback performance and security in headless environments. Frontend Playback Implementation In a headless CMS setup, media delivery is decoupled from presentation. This means video playback—whether from direct uploads or external embeds—must be implemented manually on the frontend. The rendering logic depends on whether the video is hosted directly via the CMS or embedded from a third-party platform. Example : Rendering a Directly Uploaded Video
Your browser does not support the video tag.
Explanation:
: Embeds a video player in the browser with specified dimensions and native playback controls, rendering a Contentful-hosted video asset. width='640' / height='360' : Sets the visible dimensions of the video player in pixels (16:9 aspect ratio). controls : Enables default browser controls for play, pause, volume, and fullscreen interaction. Fallback text: 'Your browser does not support the video tag.' is displayed for browsers that lack HTML5 video support.
: Defines the video source using a direct link to a Contentful asset hosted on their CDN. Example : Rendering an Embedded YouTube Video
Explanation
: Embeds a YouTube-hosted video directly into the page, allowing in-place playback with configurable permissions and display properties. width='640' / height='360' : Sets the fixed display dimensions of the video player (16:9 aspect ratio). src='https://www.youtube.com/embed/abc123' : Points to the embeddable version of a YouTube video using its unique video ID (abc123), served via YouTube’s embed endpoint. title='Embedded YouTube Video' : Provides an accessible label for screen readers and assistive technologies, enhancing usability and compliance. frameBorder='0' : Removes the default border around the iframe for a cleaner visual presentation. allow='autoplay; encrypted-media' : Grants permission for specific features: autoplay : Allows the video to start playing automatically (if browser policies permit). encrypted-media : Enables use of DRM-protected or licensed media content. allowFullScreen : Enables the user to toggle the video into full-screen mode. Key Considerations Static <video> tags rely entirely on the quality and format of the uploaded file. Embedded players handle video delivery, quality adaptation, and streaming behind the scenes. For a consistent experience, ensure video metadata (like dimensions and duration) is available for responsive layout and fallback handling. This approach gives developers full control over how video content appears and behaves across different devices and contexts. Metadata Best Practices When managing video content in a headless CMS, storing metadata in a structured format is essential for dynamic rendering, searchability, and layout control. Rather than relying solely on raw asset fields, it's best to model metadata explicitly within your content types. This ensures the frontend has all the necessary information to render videos effectively and adapt to different devices and use cases. Recommended Metadata Fields videoUrl or embedId : Use for referencing external platforms like YouTube, Vimeo, or Mux. This allows the frontend to generate correct embed links or resolve player types dynamically. Duration: Store the video length in seconds or as a formatted string (e.g., '02:31'). This is useful for displaying runtime, sorting videos, or providing playback context to the user. resolution (width, height): Include resolution data to support responsive design. This helps calculate aspect ratios, apply correct layout spacing, and optimize rendering for mobile or desktop views. thumbnail: A preview image improves visual context before playback. It can be rendered as a static image, as part of a custom player UI, or used for lazy loading. </noscript> <link rel="stylesheet" href="//wwwcdn.cincopa.com/_cms/learn/learn-cincopa.css?fts=2025-09-19T06:35:56.5977728Z"> <div id="app" class="learn-wrapper"></div> <script src="//wwwcdn.cincopa.com/_cms/include22/vue/moment.js?fts=2023-01-31T15:39:23.3185061Z"></script> <script src="//wwwcdn.cincopa.com/_cms/include22/vue/vue3.js?fts=2022-01-14T10:31:42.1899016Z"></script> <script src="//wwwcdn.cincopa.com/_cms/include22/libs/axiosmin.js?fts=2022-01-14T10:35:06.8230222Z"></script> <!-- ✅ Prism.js (Syntax Highlighting) --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" /> <script src="https://cdn.jsdelivr.net/npm/prismjs/prism.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-javascript.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-json.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-markup.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-css.min.js"></script> <!-- ✅ Prettier (Standalone + Plugins) --> <script src="https://unpkg.com/prettier@3.2.5/standalone.js"></script> <script src="https://unpkg.com/prettier@3.2.5/plugins/babel.js"></script> <script src="https://unpkg.com/prettier@3.2.5/plugins/html.js"></script> <script src="https://unpkg.com/prettier@3.2.5/plugins/estree.js"></script> <script src="https://unpkg.com/prettier@3.2.5/plugins/markdown.js"></script> <script src="https://unpkg.com/prettier@3.2.5/plugins/postcss.js"></script> <script src="//wwwcdn.cincopa.com/_cms/learn/learn-cincopa.js?fts=2025-09-16T13:46:38.7605631Z"></script> <script> window.prettierPlugins = [ prettierPlugins.babel, prettierPlugins.html, prettierPlugins.estree, prettierPlugins.markdown, prettierPlugins.postcss, ]; function enhanceCodeBlocksWithCopy() { document.querySelectorAll("pre > code").forEach((codeBlock) => { const pre = codeBlock.parentElement; if (!pre.parentElement.classList.contains("code-wrapper")) { const wrapper = document.createElement("div"); wrapper.className = "code-wrapper"; pre.replaceWith(wrapper); wrapper.appendChild(pre); const copyBtn = document.createElement("div"); copyBtn.className = "code-btn copy"; copyBtn.textContent = "Copy"; copyBtn.onclick = () => { navigator.clipboard.writeText(codeBlock.textContent.trim()); copyBtn.textContent = "Copied"; setTimeout(() => (copyBtn.textContent = "Copy"), 1500); }; const buttonsGroup = document.createElement("div"); buttonsGroup.className = "code-buttons-group"; buttonsGroup.appendChild(copyBtn); wrapper.appendChild(buttonsGroup); } }); } window.addEventListener("load", enhanceCodeBlocksWithCopy); </script> <!-- End Container Area --> </div> <footer class="footer "> <div class="sitemap"> <div class="td1"> <div class="footer-td-title">Templates</div> <ul> <li><a href="/media-platform/skins">All Templates</a></li> <li><a href="/media-platform/services/create-slideshow">Slideshows</a></li> <li><a href="/skins/video">Player Layouts</a></li> <li><a href="/skins/video-gallery">Interactive Gallery</a></li> <li><a href="/media-platform/services/create-photo-gallery">Photo Gallery</a></li> <li><a href="/media-platform/services/add-music-to-website">Audio, Music & Podcast Players</a></li> <li><a href="/media-platform/html-slideshow">HTML Slideshows</a></li> </ul> </div> <div class="td2"> <div class="footer-td-title">FEATURES</div> <ul> <li><a href="/video-hosting/video-platform">Video Platform</a></li> <li><a href="/video-hosting/video-gallery">Video Gallery</a></li> <li><a href="/video-hosting/video-marketing-tools">Video Marketing Tools</a></li> <li><a href="/video-hosting/enterprise">Enterprise</a></li> <li><a href="/features/plugins-integration">Plugins And Integrations</a></li> <li><a href="/video-hosting/video-player">Video Player</a></li> <li><a href="/features/developers">Developers API</a></li> </ul> </div> <div class="td3"> <div class="footer-td-title">COMPANY</div> <ul> <li><a href="/about-us">About Cincopa</a></li> <li><a href="/product-changes">Product Changelog</a></li> <li><a href="/about/brand-assets">Brand Guidelines</a></li> <li><a href="/partners">Cincopa Partners</a></li> <li><a href="https://features.cincopa.com/contact-us">Contact Us</a></li> <li style="display:none;"><a href="/portal-sitemap.aspx">Portals</a></li> </ul> </div> <div class="td5"> <div class="footer-td-title">MEET CINCOTUBE</div> <ul> <li><a href="https://www.cincotube.com/" target="_blank">CincoTube Product</a></li> <li><a href="https://engage-cincotube.cincopa.com/ws/All!all" target="_blank">Cincopa Video Tube</a></li> <li><a href="https://csm-tube.cincopa.com/ws/All!all" target="_blank">Cincopa's Video Help Tube</a></li> </ul> </div> <div class="td4"> <a href="/demo" class="getDemo btn primary"><b>GET A DEMO</b></a><br> <a href='/register.aspx' class='freeTrial btn getDemo'><b>FREE TRIAL</b></a> <div class="footer-social"> <a href="https://www.facebook.com/cincopa/" target="_blank" class="sIco facebook"><span class="sr-only">Facebook</span></a> <a href="https://twitter.com/cincopa" target="_blank" class="sIco twitter"><span class="sr-only">Twitter</span></a> <a href="https://www.instagram.com/cincopa/" target="_blank" class="sIco instagram"><span class="sr-only">Instagram</span></a> <a href="https://www.linkedin.com/company/950564/" target="_blank" class="sIco linkedin"><span class="sr-only">Linkedin</span></a> </div> <br> </div> <a href="https://www.cincopa.com/" class="btn trans scrollToTop"><i class="icon-arrow-up"></i><b>Need a ride up?</b></a> <script> $(document).ready(function(){ $('a.scrollToTop').click(function(e) { e.preventDefault(); $('html,body').animate({ scrollTop: 0 },'slow'); }); }); </script> </div> <div class="footer-copyright">©2025 All rights reserved to Cincopa.com <a href="/privacy-policy">Privacy</a> and <a href="/legal-stuff">Terms</a>.</div> </footer> <script> if(__ud.acc_id){ getData(__ud.acc_id); } async function getData(uid) { const url = "https://94wmblgri4.execute-api.us-east-1.amazonaws.com/default/cincopaChatbase?action=get-hash&uid="+uid; try { const response = await fetch(url); if (!response.ok) { throw new Error(`Response status: ${response.status}`); } const json = await response.json(); window.chatbaseUserConfig = { user_id:uid, user_hash: json?.data?.hash, user_metadata : convertValuesToStrings(getEssentialUserMetadata(__ud)) } if(__ud && __ud.acc_id) { window.chatbase.setInitialMessages([ `Hi ${__ud?.acc_name}! (${__ud?.email})`, "How can I help you today?" ]); } //window.chatbase("identify", window.chatbaseUserConfig); } catch (error) { console.error(error.message); } } function getEssentialUserMetadata(__ud) { return { // Account Info acc_id: __ud.acc_id, acc_name: __ud.acc_name, email: __ud.email, name: __ud.name, signed_up_at: __ud.signed_up_at, account_first_visit: __ud.account_first_visit, account_registration: __ud.account_registration, access_level: __ud.access_level, plan: __ud.plan, last_plan_signup_date: new Date(__ud.last_plan_signup_date * 1000), last_plan_signup_date_adjusted: new Date(__ud.last_plan_signup_date_adjusted * 1000), // Usage Info storage_usage: __ud.storage_usage+"GB", traffic_usage: __ud.traffic_usage+"GB", traffic_last_month_usage: __ud.trafficlm_usage+"GB", image_count: __ud.image_count, video_count: __ud.video_count, audio_count: __ud.audio_count, other_count: __ud.other_count, gallery_count: __ud.gallery_count, portal_count: __ud.portal_count, cincotube_count: __ud.cincotube_count, user_access_count: __ud.user_access_count, cincotube_access_count: __ud.cincotube_access_count, // Limits Info max_images: __ud.max_images, max_audios: __ud.max_audios, max_videos: __ud.max_videos, max_others: __ud.max_others, storage_files_usage_percent: __ud.storage_files_usage_percent }; } function convertValuesToStrings(obj) { const result = {}; for (const key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { result[key] = ( obj[key] == -1 ? 'Unlimited': String(obj[key])); } } return result; } </script> <script> (function(){if(!window.chatbase||window.chatbase("getState")!=="initialized"){window.chatbase=(...arguments)=>{if(!window.chatbase.q){window.chatbase.q=[]}window.chatbase.q.push(arguments)};window.chatbase=new Proxy(window.chatbase,{get(target,prop){if(prop==="q"){return target.q}return(...args)=>target(prop,...args)}})}const onLoad=function(){const script=document.createElement("script");script.src="https://www.chatbase.co/embed.min.js";script.id="USi4Hyw9GbhM_5vVKsmuj";script.domain="www.chatbase.co";document.body.appendChild(script)};if(document.readyState==="complete"){onLoad()}else{window.addEventListener("load",onLoad)}})(); </script> </div> <script> function Hubspot(name, properties) { console.log('hubspot usage', name, properties, "pe20167142_" + name.toLowerCase().replaceAll(" ", "_").replaceAll(".", "_")); var _hsq = window._hsq = window._hsq || []; try { _hsq.push(["trackCustomBehavioralEvent", { name: "pe20167142_" + name.toLowerCase().replaceAll(" ", "_").replaceAll(".", "_"), properties }]) } catch(e) { console.log(e) } } </script> <script type="text/javascript"> function fire_usage_event(what, extra) { try { //mixpanel.track(what); //Intercom("trackEvent", what, extra); Hubspot(what, extra); //cincomEvent(what, extra || {}, window.cincomSettings); } catch(ex) {} } </script> <script> $(window).on('resize', headerResize); headerResize(); function headerResize() { if($(window).width() <= 767) { $('.librarySideMenu').prepend($('.nam-nav.nam-leftnav')); $('.navAppMode .showMobileMenu').removeClass("cp-hide"); } else if($(this).width() >= 768) { $('.nam-nav.nam-leftnav').insertBefore($('.navAppMode .nam-rightnav')); $('.navAppMode .showMobileMenu').addClass("cp-hide"); } } </script> <!-- /design15/add-bottom-scripts --> <script type='text/javascript'> function is_debug() { try { if (typeof inBetween == 'function' && inBetween(document.cookie, "debug=", ";") == "on") return true; } catch(ex) { } return false; } </script> <script> var __user_level = __ud.access_level; if(__us.is_user_logged && __ud.access_level == 'suspended' && location.pathname !='/suspended' ){ location.href = '/suspended'; } var __edit_mode = false; if(__us.is_user_logged){ $('body').addClass(__ud.access_level); if (__us.session_type == "mcc"){ $('.header .headRight').append('<div class="sessionBox"><span>mcc: ' + __ud.email + '</span></div>'); } if(__ud.access_level == "owner" || __ud.access_level =="admin" || __ud.access_level =="editor" ){ __edit_mode = true; }else{ $('.createaccount').removeAttr('href'); if(__ud.access_level == 'viewer') $('.createaccount').html('** read only mode **'); else $('.createaccount').html('** suspended**'); } } var user_plan_name = __ud.plan; var __user_feature = {}; var __is_user_logged = __us.is_user_logged; </script> <!-- user type class--> <script> if (!__us.is_plan_trial) { $('body').addClass('cincopa_account_' + __ud.plan); } </script> <!--Object for share--> <script> var resShareDefaults = { 'image': 'A4IA-RbWMFlu', 'video': 'A4HAcLOLOO68', 'music': 'AEFALSr3trK4', 'unknown' : 'AYFACCtYYllw' } </script> <script> var formdata = inBetween(document.cookie, "cp_formdata=", ";"); if(formdata) { var hubspotSettings = {} var formjson = JSON.parse(decodeURIComponent(atob(formdata))); hubspotSettings.name = (formjson.first + " " + formjson.last).trim(); hubspotSettings.email = formjson.email; hubspotSettings.phone = formjson.phone; hubspotSettings.domain = formjson.domain; hubspotSettings.company = formjson.company; hubspotSettings.position = formjson.position; hubspotSettings.interested_in = formjson.interested_in; hubspotSettings.lead_source = formjson.lead_source; hubspotSettings.user_from = 'Cincopa' hubspotSettings.plan = "lead"; hubspotSettings.plan_id = -1; var _hsq = window._hsq = window._hsq || []; _hsq.push(["identify", hubspotSettings]); } </script> <!-- Start of HubSpot Embed Code --> <script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/20167142.js"></script> <!-- End of HubSpot Embed Code --> </body> </html> <!-- TEMPLATE /design15/templates/content-page-2023 --> <!-- CMS PAGE /learn runtime 52ms -->
Video Hosting
Image Hosting
Galleries
Video Messaging
CincoTube
Pages
Live
