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

Enhance Your Travel Site With Cloudinary in Anticipation of a Return to New Normal

Read more
The Benefits of Headless DAMs

Headless is not a buzzword anymore. In fact, the concept of headless architecture is gaining momentum due to the flexibility it offers for composing new experiences and for tackling the undue complexity of an ever-evolving technology stack. That’s because while the evolution of the martech landscape has enabled disruptive, digital innovations, the approach of buying point solutions for solving specific challenges can expose companies to the complicated nature of new technologies, systems, and platforms.

Read more

Building Display Ads With Transparent Video

By Afzaal Ahmad Zeeshan
Build Web Ads With Transparent Video to Attract User Engagement

Billions of views on the Internet every day drive one of the biggest industries on the planet: advertising. The sheer size of that market and the competitive nature of vying for consumer attention results in a constant need for innovation. Readers are jaded, and display ads are blind spots.

Read more
How Cloudinary's Media Optimizer Helps E-Businesses Deliver Superior Web Performance

As a technology company, Cloudinary owes its success to its ability to build solutions that address the most critical challenges you, our customers, face. The companies we serve run the gamut of digital businesses—retailers and direct-to-consumer brands, media and entertainment, travel and hospitality—which, coincidentally, all care about the same things.

Read more