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

JavaScript File Upload

Uploading software files to the web, mobile, or desktop is as old as the web itself. Billions of files are moved around and downloaded on the Internet daily. Coincidentally, as the de facto language in which many apps are written, JavaScript is also as old as the web.

Read more
What’s New for Video in E-Commerce

With videos becoming more and more paramount for promoting online sales, we at Cloudinary Labs are building technology to help grow the business of e-commerce retailers. This series of blog posts delves into a few use cases that promise to boost retail revenue online across the patron’s browsing journey through the e-commerce site.

Read more
Securely Uploading Images to Cloudinary by Email

Despite United States founder Benjamin Franklin’s wisdom that three can keep a secret if two of them are dead, you as developers often need contributions from third parties for your project. However, in today’s digital world, security in software development is a predominant concern. With respect to management of rich media, it’d be ideal if those folks could upload images or videos to your Cloudinary account without having to log in.

Read more
ImageCon 2020: A Digital Experience

Despite our disappointment at the cancellation of our fourth annual ImageCon conference in late April due to the pandemic, we forged on and are thrilled to announce a digital version of ImageCon on Monday July 27 through the 30th, an excellent forum for learning from our customers, partners, and colleagues. The new digital format will deliver much of the same Visual Web-related content planned for April along with new additions, featuring five interactive sessions by renowned experts in the media sector. Each session will be about 30 minutes long, during which you can ask the speakers questions live and “get on stage.” Also, you can watch the sessions on demand afterwards.

Read more
Good Reads Meet Visual Tools at Bloomsbury

Most might know Bloomsbury Publishing as the publisher of the Harry Potter series. What you might not know is that the publishing house also has a vibrant academic division that offers digital reproductions of encyclopedias, manuscripts and museum collections for use by university libraries and researchers. Seeking a way to manipulate and serve high-resolution images, combined with security that prevented anyone other than library patrons and paid users to access the content, Bloomsbury discovered Cloudinary’s digital asset management (DAM) solution.

Read more