Cloudinary Blog

Creating More Engaging Social Videos at Scale

Automatic Video Creation for Social Media at Scale

With video becoming increasingly popular, especially across social media, it’s as important as ever to ensure that your videos aren’t one of the hundreds that people just scroll on past. There’ve been a few successful techniques over the last couple of years to help with that, such as—

  • Overlaying a progress indicator so users can see the video length when no controls are displayed.
  • Adding branded overlays to grab attention and spotlight your company.
  • Showing subtitles so that videos can be viewed without sound.

Cloudinary can now help you automate and build on those tasks so that you can deliver engaging social video experiences to your users at scale. Cloudinary has offered its developers simple ways to implement impressive overlays and slick subtitles for a while. We’ve now added the final piece of the jigsaw with our new progressbar effect. Given that you’re building videos on Cloudinary’s Dynamic Video platform, why not also make use of the advanced AI functionalities such as automatic content-aware cropping to ensure it’s ready to be pushed out to social media platforms in the right aspect ratio while keeping all the best content in shot?

Here’s an example video that includes—

  • A progress indicator frame
  • Automatically generated subtitles
  • A branded overlay
  • AI-based resizing to a different aspect ratio by means of content-aware cropping

This post shows you how to automate the creation of a video just like the one above (using the NodeJS SDK in this example) so you can easily produce your own engaging experiences and get those nonstop scrollers to stop at your videos.


Sign up for Cloudinary free today!


Step 1 - Let’s Make Some Progress

The newest functionality in the Cloudinary social-video arsenal is the progressbar effect. Social media platforms have evolved their video experience over the last fews years so we’re all used to videos autoplaying when scrolled into view, often without displaying any controls until they are interacted with. While this is a great way to increase the number of views, if your users don't know how long a video might last, they may just keep on scrolling.

To give users a simple way to understand about how many precious seconds a no-controls video will take out of their day, content creators have turned to overlaying a progress indicator— either along the bottom or around the frame of the video. That’s a great way to motivate users to watch till the end if they can see that the video won't go on for too long.

It’s super simple to add a progress indicator overlay with Cloudinary— no calculations required; just add the progressbar effect (e_progressbar in URLs), and Cloudinary does all the heavy lifting. By default, this will add a 10px wide red progress bar, as the example below shows:

Node.js:
Copy to clipboard
cloudinary.video("digital-asset-management-with-cloudinary", {effect: "progressbar"})



You can easily customize the progress bar to fit your requirements. Three parameters are available:

  • type controls the type of progress indicator to overlay, which can be a bar or frame.
  • color controls the color of the indicator.
  • width controls the width (in pixels) of the indicator.

Here’s an example of a slightly thinner orange frame effect:

Node.js:
Copy to clipboard
cloudinary.video("digital-asset-management-with-cloudinary", {effect: "progressbar:frame:orange:8"})



Take a look at the progressbar documentation for more on how to add this effect to your videos.

Step 2 - Sound Off, Subtitles On

According to research by Verizon and Publicis, 93% of mobile users watch videos with the sound off. They also claimed that 80% would watch an entire video if subtitles were available. Statistics like these show how important it is for social videos without sound to be compelling for viewers. The task of creating subtitles can be rather laborious and time-consuming, especially when you have lots of videos. Thankfully with Cloudinary and one of our Automatic Transcription add-ons (Google Speech or Azure), you can automate that task and combine it with our other features.

Once you’ve enabled one of the add-ons, you can generate subtitles automatically on upload by setting the raw_convert parameter to either “google_speech” or “azure_video_indexer”. By default this will add a raw transcript file to your account with the same name as your video. You can also generate a Video Text Tracks (VTT) file by adding that option, as shown below.

Here’s the upload code, assuming you have installed the NodeJS SDK and created a Cloudinary instance:

Copy to clipboard
cloudinary.v2.uploader.upload("my-video.mp4",
   {
       resource_type: "video",
       type: "upload",
       raw_convert: "azure_video_indexer:vtt",// Auto-generate subtitles and save vtt file
       use_filename: true,
       notification_url: "my-webhook"
   })

Once complete, you’ll then see the transcript and VTT files in your Media Library. Due to the lack of support for text tracks on social media platforms, you’ll need to overlay the transcript files as subtitles. Here’s how to do that with the example video:

Node.js:
Copy to clipboard
cloudinary.video("digital-asset-management-with-cloudinary", {overlay: {resource_type: "subtitles", public_id: "digital-asset-management-with-cloudinary.vtt"}})

Nice, simple, and all automated. Now you can easily share your videos with the sound off and subtitles on.

Step 3 - Keeping It On Brand

We’ve established the importance of providing an optimal social video experience for the endless scrollers, but how do we grab their attention at a quick glance and make sure they remember your brand? One simple technique is to overlay some bold brand imagery.

You can use Cloudinary's tried and tested overlay transformation to achieve this, just pick your brand assets, resize and position them.

Here’s an example of overlaying the Cloudinary fashion demo logo in the top right corner of the video and the Cloudinary logo in the bottom left, ensuring nobody misses your brand.

Node.js:
Copy to clipboard
cloudinary.video("digital-asset-management-with-cloudinary", {transformation: [
  {color: "#db8226", effect: "colorize", gravity: "north_east", overlay: "cld_fashion", width: "0.5", x: "0.01", y: "0.01", crop: "scale"},
  {color: "#0e2f5a", effect: "colorize", gravity: "south_west", overlay: "cld_logo_white", width: "0.5", x: "0.01", y: "0.01", crop: "scale"}
  ]})



Tip
You can save your brand overlay as a named transformation, which will make it much easier to reuse.

Step 4 - Generating the Final Video

You now know how to add the effects and overlays on their own but must combine them to create the final video. In this case, you deliver two videos, one in a square (1:1) aspect ratio and the other in a vertical (9:16) aspect ratio. Do that with Cloudinary’s AI-based automatic content-aware cropping. This feature will automatically identify the most relevant content from each frame of the video and crop accordingly, ensuring that none of that great social content gets lost when it needs to be added to various social platforms in different aspect ratios.

Automatic content-aware cropping involves the generation of a heat map from the video. Since that process can take a while to complete, trigger it as an eager transformation when uploading the video. In the example below we’re setting the width to 500px, the aspect-ratio to 1:1, the crop mode to fill and the gravity to auto, which will trigger the heatmap generation. Once complete, you can generate any subsequent video sizes on-the-fly.

Note
On-the-fly video transformations will still take some time to complete, especially for larger files.

Copy to clipboard
cloudinary.v2.uploader.upload("my-video.mp4",
   {
       resource_type: "video",
       type: "upload",
       use_filename: true,
       eager: [// Eagerly trigger automatic content-aware cropping.
           {
               width: "500",
               crop: "fill",
               aspect_ratio: "1:1",
               gravity: "auto"
           }
       ],
       eager_notification_url: "my-eager-webhook",
       notification_url: "my-webhook"
   })

Now combine the above code and add all the previous transformations to generate the final URL. Below is a complete code example for generating the final video output:

Copy to clipboard
cloudinary.v2.uploader.upload("my-video.mp4",
    {
        resource_type: "video",
        type: "upload",
        raw_convert: "google_speech:vtt",// Auto-generate subtitles and save vtt file
        use_filename: true,
        eager: [// Eagerly trigger automatic content-aware cropping.
            {
                width: "500",
                crop: "fill",
                aspect_ratio: "1:1",
                gravity: "auto"
            }
        ]
    }).then((result) => {
        var publicId = result.public_id;// Save public ID of video we just uploaded.
        generateFinalVideo(publicId)

    }).catch((error) => {
        console.log(error);
    })

var generateFinalVideo = async function (publicId) {
    await new Promise(resolve => setTimeout(resolve, 90000));// Wait for 90 seconds for subtitle generation to complete. In production a webhook should be used.
    let finalVideo = cloudinary.url(publicId + '.mp4', {// Build URL for final video.
        resource_type: "video",
        transformation: [
            {// Crop video to the right size using automatic content-aware cropping.
                width: "500",
                aspect_ratio: "1:1",
                crop: "fill",
                gravity: "auto"
            },
            {// Add brand overlays, using named transformation.
                transformation: ["cld_brand_blog_color"]
            },
            {// Add the automatically generated subtitles as an overlay.
                overlay: {
                    resource_type: "subtitles",
                    public_id: publicId + ".vtt"
                }
            },
            {// Add the progressbar frame around the video.
                effect: "progressbar:frame:DB8226:8"
            }
        ]
    });

    console.log(finalVideo)// Output the final video URL.

}

This is the final video URL that is output from the code above:

You can see that it includes the square crop. You can simply edit this URL to generate a vertical 9:16 video, for example:

In Summary

There you have it, a basic tutorial on how to combine various Cloudinary features to automate the generation of social videos, preventing your content from just being scrolled past. Go ahead and try it out, you can start with our newest functionality and overlay a progress indicator to your videos, just by adding the progressbar effect (e_progressbar in URLs). Once you're done, why not check out the video transformations documentation for more ways to enhance your video experience.

Recent Blog Posts

Overlaying Glasses Or Masks on Avatars With Vue.js and Cloudinary

Deep learning, a subset of machine learning, breaks down tasks in ways that make all kinds of machine assists possible. With deep learning, you can identify images by machine, i.e., instead of hand-coding software with specific instructions for a task, you train the machine with large amounts of data and algorithms that enable it to learn how to perform the task.

Read more
On-Demand Viewing of Live Video Presents New Opportunities

In early 2020, Cloudinary was planning its fourth annual ImageCon conference, a two-day event in the heart of San Francisco, where we’d congregate with curious digital-media minds to brainstorm best practices for media management. Instead, the COVID-19 pandemic forced the entirety of ImageCon 2020 online. As with all other events being planned, we had to overhaul the content to be communicated on video. Gratifyingly, we found the right partner—the event platform Bizzabo—to turn that into a reality.

Read more
Why the Future of E-commerce Is Live

In a previous post, I discussed how “going live” is gaining popularity across industries and verticals. What began as a way for gamers to jam together has evolved into a medium for broader entertainment and business purposes. To continue the conversation, this post unpacks the current trends of shoppable live streams to shine a light on how brands are leveraging “lives” to connect with shoppers in new ways.

Read more
An Overview of Live-Streaming Video Trends

“Let’s go live.” For decades, that’s what newscasters say as they cut to real-time footage of a colleague reporting in the field. The live-video feed adds visual interest and perspective to a story beyond what can be communicated by someone sitting behind the news desk. In the same way, live-streaming video nowadays adds context to other consumer environments. From gaming and events to shopping and social media, “going live” enhances everyday experiences, and it’s something anyone can do with relative ease.

Read more