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.


Delivering Compelling Video Experiences at Scale


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: {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

Image-Editing Basics and a Tutorial for Automation With AI

You likely find yourself continually editing images for enhancement by eliminating flaws and tweaking the overall presentation, typically with software tools. Examples of basic editing are straightening, cleaning, and cropping images, as well as adjusting the contrast, exposure, and white balance. With advanced software like Cloudinary, you can automate not only editing tasks, such as quality adjustment and encoding, but also delivery.

Read more
Tips for Retaining Audience Through Engaging Videos

Measuring the level of interest your videos generate helps you produce compelling content. The measurement and optimization approach must, however, address the various aspects of each video, including the A/B test hypothesis and iterations. A high engagement rate spells effective videos; a low engagement rate calls for content improvement.

Read more
Forbes Cloud 100: When the Stars Align

In 2017, when Cloudinary first made the Forbes Cloud 100 as a ‘Rising Star,’ it was an incredibly proud moment for the company. In 2018 we graduated from Rising Star status to be acknowledged as part of the incredible Cloud 100, the top 100 SaaS companies in the world. Today marks our third consecutive year on this prestigious list.

Read more
A Cloudinary-Enhanced Student-ID App

I’m an instructional designer on Cloudinary’s Solutions and Training team. As the COVID-19 pandemic emerged in March, like other global organizations, we pivoted to set up virtual courses. As much as we looked forward to resuming in-person classes in the future, we switched gear to focus on the virtual way of learning.

Read more
Image Formats: Getting it Right

Image formats, which are standards for digital images, can be uncompressed, compressed, raster based, or vector based. You determine the DNA of your images with the formats you adopt, each of which offering different capabilities. For example, rasters generate images with pixels; vectors, with vectors or proportional formulas. PNGs can display logos without background; JPEGs always come with backgrounds. This article explains the main properties of the various image formats, including their basic concepts and pros and cons.

Read more