Creating More Engaging Social Videos 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.

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:

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:

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:

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:

cloudinary.video("digital-asset-management-with-cloudinary", {overlay: {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.

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"}
  ]})

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.

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:

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.