Video integration in Storyblok requires defining a custom component with fields for video URL, title, description, and thumbnail. These components allow structured video data to be stored and retrieved via the Storyblok API. On the frontend, video content is dynamically rendered based on this schema, enabling efficient updates without modifying the codebase.

Understanding Storyblok Components

Storyblok"s component-based architecture allows you to break down the layout of your site into reusable sections. Each component represents a distinct part of your page, which can contain fields such as text, images, or videos. With this approach, you can dynamically manage content without relying on static HTML or manually coded sections.

Storyblok"s flexible content structure makes it possible to create custom video components that are easy to integrate and update. You can use Storyblok's visual editor to manage the content, and developers can retrieve this content via APIs and display it in any front-end framework.

Banner for Video Galleries

Setting Up Video Components in Storyblok

To build video sections with Storyblok, start by creating a custom video component. This component will allow content editors to upload, embed, and manage video links. Here"s how to create and configure this component.

Step 1: Define the Video Component in Storyblok

  1. Log in to your Storyblok dashboard.
  2. Create a new component by going to the "Components" section and clicking "Create new."
  3. Define fields for your component, such as
  • Video URL (Text Field): To store the link to the video (e.g., YouTube, Vimeo, or custom hosted).
  • Video Title (Text Field): To store the title of the video.
  • Video Description (Text Area): To store a brief description of the video.
  • Video Thumbnail (Image Field): To store the thumbnail image of the video.

Example component schema for the video section:

code
{
"component": "video-section",
"fields": [
{
"name": "video_url",
"type": "text",
"required": true
},
{
"name": "video_title",
"type": "text",
"required": true
},
{
"name": "video_description",
"type": "textarea",
"required": false
},
{
"name": "video_thumbnail",
"type": "image",
"required": true
}
]
}

Step 2: Add the Video Component to Your Page

Once the component is created in Storyblok, you can add it to your pages. Use the Storyblok visual editor to drag and drop the component into the desired section of your page.

In the editor, you"ll be able to fill in the fields for the video URL, title, description, and thumbnail. This allows content editors to manage the video content without needing developer intervention.

Step 3: Display the Video in Your Front-End

Once your video component is set up and content has been added through the Storyblok editor, you need to render the video in your front-end application. For this, you will retrieve the content using the Storyblok API and embed it in your HTML template.

Here"s an example of how you can fetch the video component data in a React application using the Storyblok API.

code
import React, { useEffect, useState } from 'react';
import axios from 'axios';
const VideoSection = () => {
const [videoData, setVideoData] = useState(null);
useEffect(() => {
const fetchData = async () => {
const response = await axios.get('https://api.storyblok.com/v1/cdn/stories/video-section', {
params: {
version: 'draft', // Or 'published' for live data
token: 'your-api-token'
}
});
setVideoData(response.data.story.content);
};
fetchData();
}, []);
return (
<div className="video-section">
{videoData ? (
<div className="video-container">
<img src={videoData.video_thumbnail} alt={videoData.video_title} />
<h2>{videoData.video_title}</h2>
<p>{videoData.video_description}</p>
<iframe
title={videoData.video_title}
src={videoData.video_url}
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
></iframe>
</div>
) : (
<p>Loading video...</p>
)}
</div>
);
};
export default VideoSection;
code

Explanation:

  • Storyblok API Call: The axios.get function retrieves the content of the video component from Storyblok.
  • Rendering Video Data: The videoData state holds the component content, which is rendered in a video section on the page.
  • Video Embed: The iframe element embeds the video (e.g., YouTube or Vimeo) using the URL stored in Storyblok.

Enhancing the Video Component

Once the basic video component is set up, you can enhance it with additional features like

  1. Autoplay: Add an autoplay feature for videos by modifying the iframe tag to include the autoplay parameter.
  2. Lazy Loading: Implement lazy loading for videos to improve page performance by only loading videos when they come into view.
  3. Custom Controls: Add custom controls like a play/pause button, volume control, and fullscreen option using JavaScript and CSS.

Example: Lazy Loading Videos

You can modify the iframe to support lazy loading by adding the loading="lazy" attribute

code
<iframe
title={videoData.video_title}
src={videoData.video_url}
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
loading="lazy"
></iframe>

Managing Multiple Video Sections

If your site has multiple video sections, you can dynamically create and render video components based on the content fetched from Storyblok. This allows content editors to manage each section individually through the Storyblok editor.

Example: Displaying Multiple Video Sections Dynamically

code
import React, { useEffect, useState } from 'react';
import axios from 'axios';
const VideoGallery = () => {
const [videoSections, setVideoSections] = useState([]);
useEffect(() => {
const fetchVideoSections = async () => {
const response = await axios.get('https://api.storyblok.com/v1/cdn/stories', {
params: {
version: 'draft',
token: 'your-api-token'
}
});
setVideoSections(response.data.stories);
};
fetchVideoSections();
}, []);
return (
<div className="video-gallery">
{videoSections.map((section) => (
<div key={section.id} className="video-item">
<h2>{section.content.video_title}</h2>
<iframe
src={section.content.video_url}
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media;
gyroscope; picture-in-picture"
allowFullScreen
></iframe>
</div>
))}
</div>
);
};
export default VideoGallery;