When you have an e-commerce site or you want to add some visual customization for your users, creating a video slideshow with specific images can be a nice touch. If you have existing images and videos, all of them can be combined to make something special for your users and potentially increase your sales and user retention.
In this article, we'll walk through how to make a custom video slideshow using Cloudinary. If you don't have a Cloudinary account already, you can sign up for a free one and start adding images and videos that you can use for your website.
When you log into your account, you'll be taken to the Dashboard. From there, navigate to the Media Library. This is where you can add any images and videos you want to use.
Setting up the project
We'll be making a simple page to show custom videos to different users with React. To start, open a terminal (I'm using VSCode) and run:
1npx create-react-app video-generator2cd video-generator
You can delete the CSS files and remove the associated import statements in the App.jsx and index.js files.
With your Cloudinary account and our newly created React app, we can start making custom slideshows!
Making a slideshow
In the App.jsx file, you can delete everything and just follow along here. First, we need to install the styled-components package so that we can arrange the videos on a page with some CSS-in-JS.
1npm i styled-components
Now let's import a couple of packages at the top of the App.jsx file.
1import React from "react";2import styled from "styled-components";
Next, we can create the App component and export it.
1function App() {}23export default App;
Let's say you have data that shows the products people look at the most frequently on your site and you want to show three videos on your home page that highlights them. We'll start by making a couple of styled-components, one to style our videos and one to contain those videos.
1const Video = styled.video`2 height: 200px;3 padding: 24px;4 width: 350px;5`;67const VideoContainer = styled.div`8 display: flex;9 flex-wrap: wrap;10 justify-content: space-between;11 width: 100%;12`;
With these styled-components in place, we can start working on creating the video slideshows with Cloudinary.
Defining the slideshow elements
Videos are created using this URL syntax given in the Cloudinary docs:
You can get the cloudname from your Cloudinary console.
The global-settings are general settings applied to your video, like the height and width that Cloudinary should return as well as the duration that the video should be.
The slide-settings are responsible for the settings that apply to each slide. This will include things like how long the image is shown before switching to the next one, what kind of transition is applied between slides, and how long the transition lasts.
The individual-slide section is how you add images or videos based on their public_id to your slideshow. We'll use this to add the specific images we want a little later.
The global-transformations are how you can take advantage of the regular transformations Cloudinary has available, like automatically adjusting the quality of the video so that it's optimized for your users.
The template is how we let Cloudinary know we're going to create a video slideshow. You'll need to upload the template for the slideshow.
Since video slideshow generation is a beta feature, this is the only template you can work with for now.
Slideshow with only images
With that background info on how slideshow generation works, let's start adding a few things to our React app.
Inside of the App component, we're going to add a new object with the parameters we need to pass to Cloudinary to generate our video. This will contain the height, width, video duration, slide duration, transition duration, and images you want to show in the video. We'll also create an array containing the public_id of each image we want to show in the slideshow.
1const vidVars = {2 w: 500,3 h: 500,4 du: 15,5 sdur: 3000,6 tdur: 1500,7};89const vidA = ["3dogs", "reindeer", "cat"];
Now let's add the first video using our styled-components.
1return (2 <VideoContainer>3 <Video controls>4 <source5 src={`https://res.cloudinary.com/milecia/video/upload/fn_render:w_${6 vidVars.w7 };h_${vidVars.h};du_${vidVars.du};vars_(sdur_${vidVars.sdur};tdur_${8 vidVars.tdur9 };transition_s:circlecrop;slides_(${vidA10 .map((mediaDoc) => `(media_i:${mediaDoc})`)11 .join(";")}))/f_auto,q_auto/slideshow_hlhpzw.mp4`}12 type="video/mp4"13 />14 Your browser does not support the video tag.15 </Video>16 <VideoContainer>
Make sure you get the exact name of the slideshow template from your Media Library. You'll need to update the name in the URL we created. It will be something different from slideshow_hlhpzw.mp4.
We've taken advantage of template strings in JavaScript to dynamically generate the slideshow URL for us using the general video settings object we created and the array of the public IDs of our images.
If you run the app with the npm start command in your terminal, you should see something similar to this.
With the first video in place, let's add a couple more arrays defining the images we want to display in the other two slideshows.
1const vidB = ["reindeer", "3dogs", "dessert"];23const vidC = ["beach-boat", "3dogs", "reindeer"];
Now that we know the images we're going to show, let's go ahead and add the other two videos using the styled component.
1<Video controls>2 <source3 src={`https://res.cloudinary.com/milecia/video/upload/fn_render:w_${4 vidVars.w5 };h_${vidVars.h};du_${vidVars.du};vars_(sdur_${vidVars.sdur};tdur_${6 vidVars.tdur7 };transition_s:circlecrop;slides_(${vidB8 .map((mediaDoc) => `(media_i:${mediaDoc})`)9 .join(";")}))/f_auto,q_auto/slideshow_hlhpzw.mp4`}10 type="video/mp4"11 />12 Your browser does not support the video tag.13</Video>14<Video controls>15 <source16 src={`https://res.cloudinary.com/milecia/video/upload/fn_render:w_${17 vidVars.w18 };h_${vidVars.h};du_${vidVars.du};vars_(sdur_${vidVars.sdur};tdur_${19 vidVars.tdur20 };transition_s:circlecrop;slides_(${vidC21 .map((mediaDoc) => `(media_i:${mediaDoc})`)22 .join(";")}))/f_auto,q_auto/slideshow_hlhpzw.mp4`}23 type="video/mp4"24 />25 Your browser does not support the video tag.26</Video>
Now that you have all three videos in your app, you should see something like this in your browser.
This is how we handle slideshow generation with just images, but we do have the option to include videos within our slideshows as well.
Slideshow with images and videos
Adding a video to the slideshow means we change a few settings in the URL we generate.
Instead of using media_i:public_id, we'll have to use media_v:public_id;type_s:video. This will tell Cloudinary that the asset we're using is a video and it will be handled accordingly.
We'll add an object with two arrays, one containing the images and the other containing the videos, to our App component.
1const vidD = {2 images: ["reindeer", "sample"],3 videos: ["elephants", "sea-turtle"],4};
Lastly, we'll add one more <Video> to the component.
1<Video controls>2 <source3 src={`https://res.cloudinary.com/milecia/video/upload/fn_render:w_${4 vidVars.w5 };h_${vidVars.h};du_${vidVars.du};vars_(sdur_${vidVars.sdur};tdur_${6 vidVars.tdur7 };transition_s:circlecrop;slides_(${vidD.images8 .map((mediaDoc) => `(media_i:${mediaDoc})`)9 .join(";")}${vidD.videos10 .map((mediaDoc) => `(media_v:${mediaDoc};type_s:video)`)11 .join(";")}))/f_auto,q_auto/slideshow_hlhpzw.mp4`}12 type="video/mp4"13 />14 Your browser does not support the video tag.15</Video>
Completed code
You can take a look at the complete code in this CodeSandbox or clone the GitHub repo!
Conclusion
Working with videos can be tricky, but Cloudinary does make it easier. Keep in mind that this is a beta feature, so it'll likely change a bit later.