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
Combining Gatsby, a static site generator, with a Headless CMS and Video Hosting provides an efficient and scalable approach for managing and delivering video content. This setup allows developers to create fast, SEO-optimized websites while giving content creators a simple interface to manage video content. Setting Up Gatsby with a Headless CMS Before diving into video hosting, the first step is to set up Gatsby with a headless CMS. For this example, we'll use Strapi , a popular headless CMS that provides a flexible and easy-to-use content management system. Step 1: Install Gatsby CLI : If you don't have Gatsby installed, begin by installing the Gatsby CLI globally: npm install -g gatsby-cli Step 2: Create a New Gatsby Project : Initialize a new Gatsby project by running gatsby new gatsby-video-project cd gatsby-video-project Step 3: Install Necessary Plugins : Install plugins to connect Gatsby with your headless CMS (Strapi in this case): npm install gatsby-source-strapi Step 4: Set Up Strapi : Follow the Strapi documentation to set up a new project. Once installed, create content types for video, such as Title, Description, Video URL, Thumbnail, and Category. Step 5: Connect Strapi with Gatsby : Configure the Gatsby project to source content from Strapi by editing gatsby-config.js: module.exports = { siteMetadata: { title: 'Gatsby Video Site', }, plugins: [ { resolve: 'gatsby-source-strapi', options: { apiURL: 'http://localhost:1337', collectionTypes: ['videos'], queryLimit: 1000, }, }, ], }; In the above configuration, replace localhost:1337 with your Strapi instance URL. Integrating Video Hosting with Gatsby Now that we have the Gatsby and Strapi integration set up, it's time to integrate video hosting. For this, we'll use a video hosting platform such as Cloudinary , Vimeo , or YouTube , but you can use any video hosting service that provides embeddable URLs. Step 1: Set Up Cloudinary: If using Cloudinary, create an account at Cloudinary . Upload your videos to Cloudinary and obtain the URLs for each video. Step 2: Video Content in Strapi: In the Strapi CMS, for each video entry, add the Video URL field pointing to your hosted video (Cloudinary, Vimeo, YouTube, etc.). For Cloudinary, this would be the URL to the video stored in your account. Fetching Video Content in Gatsby To fetch the video content from Strapi, you'll need to query the Strapi API in Gatsby using GraphQL. Here’s how to display the videos dynamically in your Gatsby site. Step 1: Create a GraphQL Query : In your Gatsby project, you can query for the video data in a page or component by using Gatsby’s built-in GraphQL functionality. Example query to fetch video data: query { allStrapiVideo { edges { node { title description video_url thumbnail { publicURL } } } } } Step 2: Displaying Video Content : Now, use the queried data to display videos on your site. You can create a VideoList component: import React from 'react'; import { graphql } from 'gatsby'; const VideoList = ({ data }) => { const videos = data.allStrapiVideo.edges; return (
Video Gallery
{videos.map(({ node }) => (
{node.title}
{node.description}
))}
); }; export const query = graphql` query { allStrapiVideo { edges { node { id title description video_url thumbnail { publicURL } } } } } `; export default VideoList; Styling the Video Gallery : Customize the appearance of the video gallery with CSS to fit your needs. Deploying the Site Once everything is set up and you're satisfied with your site, you can deploy it. For Gatsby sites, deployment is simple: Deploy to Gatsby Cloud : If using Gatsby Cloud, connect the project to a GitHub repository and enable automatic builds. Gatsby Cloud will pull the repo, run the build command, and deploy the static output. Other Hosting Options : Alternatively, deploy the site to platforms such as Netlify or Vercel. Push your code to a Git provider, connect the repo in the hosting dashboard, set the build command to gatsby build, and set the publish directory to public. Configure environment variables to include the Strapi API token if needed. Best Practices for Video Hosting in Headless CMSs While integrating video hosting into a headless CMS system like Gatsby and Strapi, follow these best practices: Video Compression : Videos uploaded to external platforms must be optimized to minimize bandwidth usage and loading time. Use transcoding tools such as FFmpeg to reduce the resolution or bitrate before uploading. This reduces the file size and speeds up delivery on slow networks. H.264 and VP9 are recommended codecs for web delivery. Lazy Loading : Implement lazy loading for videos to improve the page load performance. Only load videos when they come into view. Example for lazy loading:
Thumbnail Previews : Serve thumbnail images as visual placeholders for videos. These previews help users identify the content before playback. Extract thumbnails using your video hosting platform or by capturing a frame using FFmpeg. Serve them in lightweight formats like WebP to reduce size without sacrificing quality. Mobile Optimization : Ensure that videos are optimized for mobile devices. This includes responsive design, appropriate video aspect ratios, and proper scaling.