Cloudinary Blog

Introducing Boomerang Video Effect with Cloudinary

How to Make Boomerang Video Effect With Cloudinary

When you see the term boomerang, what is the first thing that comes to mind? Boomerang

A thrown tool made of wood that returns to its thrower? Another definition is reversal, logically portraying the aim of the tool itself. Based on this definition, the term boomerang videos” came into play to depict videos that loop back and forth.

Boomerang videos have become popular since a few years ago as videos make up a large portion of communications on social media. Little wonder that Instagram moved fast in 2016 to integrate this feature into its app. Indisputably, motion graphics are leading the trend for online chats, leading to a significant increase in GIFs and boomerang videos.

Boomerang videos are fun and appealing, , especially for advertisers, because they keep you glued for a few more seconds—ample time in which to spotlight the core capabilities of the products in question. A good example is the showcase of Microsoft's Surface Book laptop on Instagram. Short, simple, and concise advertisements like that never fail to catch attention.

Boomerang videos are also in popular use for memes, which are usually in the form of humorous images, videos, or text. Those videos are nothing new, however. Many high-profile videos, such as Jidenna’s Boomerang, have adopted this format for a while

Cloudinary Makes It a Cinch

With Cloudinary’s e-boomerang capability, which enables videos to reverse themselves, you can add effects and transformations to the media stored on your console. Adding the effect doubles the length of the video, whose second half shows the reverse of the first half.

Ruby:
cl_video_tag("Cloudinary_Celebrating_1", :effect=>"boomerang")
PHP:
cl_video_tag("Cloudinary_Celebrating_1", array("effect"=>"boomerang"))
Python:
CloudinaryVideo("Cloudinary_Celebrating_1").video(effect="boomerang")
Node.js:
cloudinary.video("Cloudinary_Celebrating_1", {effect: "boomerang"})
Java:
cloudinary.url().transformation(new Transformation().effect("boomerang")).videoTag("Cloudinary_Celebrating_1");
JS:
cloudinary.videoTag('Cloudinary_Celebrating_1', {effect: "boomerang"}).toHtml();
jQuery:
$.cloudinary.video("Cloudinary_Celebrating_1", {effect: "boomerang"})
React:
<Video publicId="Cloudinary_Celebrating_1" >
  <Transformation effect="boomerang" />
</Video>
Angular:
<cl-video public-id="Cloudinary_Celebrating_1" >
  <cl-transformation effect="boomerang">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Effect("boomerang")).BuildVideoTag("Cloudinary_Celebrating_1")
Android:
MediaManager.get().url().transformation(new Transformation().effect("boomerang")).resourceType("video").generate("Cloudinary_Celebrating_1.mp4");
iOS:
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setEffect("boomerang")).generate("Cloudinary_Celebrating_1.mp4")

Since boomerang videos are supposed to be brief, Cloudinary’s eo_# effect reduces the video length. The eo_ effect is an existing feature. For example, to trim your video to 3 seconds, add the eo_3 effect. Afterwards, by adding Cloudinary’s chained transformations to the e-boomerang effect, you generate a video length of 6 seconds. That’s because Cloudinary has selected the first 3 seconds from the original video and another 3 seconds from the reversed version of the selected clip.

Ruby:
cl_video_tag("Cloudinary_Celebrating_1", :transformation=>[
  {:effect=>"boomerang"},
  {:end_offset=>"3"}
  ])
PHP:
cl_video_tag("Cloudinary_Celebrating_1", array("transformation"=>array(
  array("effect"=>"boomerang"),
  array("end_offset"=>"3")
  )))
Python:
CloudinaryVideo("Cloudinary_Celebrating_1").video(transformation=[
  {'effect': "boomerang"},
  {'end_offset': "3"}
  ])
Node.js:
cloudinary.video("Cloudinary_Celebrating_1", {transformation: [
  {effect: "boomerang"},
  {end_offset: "3"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .effect("boomerang").chain()
  .endOffset("3")).videoTag("Cloudinary_Celebrating_1");
JS:
cloudinary.videoTag('Cloudinary_Celebrating_1', {transformation: [
  {effect: "boomerang"},
  {endOffset: "3"}
  ]}).toHtml();
jQuery:
$.cloudinary.video("Cloudinary_Celebrating_1", {transformation: [
  {effect: "boomerang"},
  {end_offset: "3"}
  ]})
React:
<Video publicId="Cloudinary_Celebrating_1" >
  <Transformation effect="boomerang" />
  <Transformation endOffset="3" />
</Video>
Angular:
<cl-video public-id="Cloudinary_Celebrating_1" >
  <cl-transformation effect="boomerang">
  </cl-transformation>
  <cl-transformation end-offset="3">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Effect("boomerang").Chain()
  .EndOffset("3")).BuildVideoTag("Cloudinary_Celebrating_1")
Android:
MediaManager.get().url().transformation(new Transformation()
  .effect("boomerang").chain()
  .endOffset("3")).resourceType("video").generate("Cloudinary_Celebrating_1.mp4");
iOS:
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setEffect("boomerang").chain()
  .setEndOffset("3")).generate("Cloudinary_Celebrating_1.mp4")

Another interesting characteristic of boomerang videos is their repetitions. To keep a boomerang video looping, add the e_loop effect along with the eo_3.

Ruby:
cl_video_tag("Cloudinary_Celebrating_1", :transformation=>[
  {:effect=>"boomerang"},
  {:end_offset=>"3", :effect=>"loop:10"}
  ])
PHP:
cl_video_tag("Cloudinary_Celebrating_1", array("transformation"=>array(
  array("effect"=>"boomerang"),
  array("end_offset"=>"3", "effect"=>"loop:10")
  )))
Python:
CloudinaryVideo("Cloudinary_Celebrating_1").video(transformation=[
  {'effect': "boomerang"},
  {'end_offset': "3", 'effect': "loop:10"}
  ])
Node.js:
cloudinary.video("Cloudinary_Celebrating_1", {transformation: [
  {effect: "boomerang"},
  {end_offset: "3", effect: "loop:10"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .effect("boomerang").chain()
  .endOffset("3").effect("loop:10")).videoTag("Cloudinary_Celebrating_1");
JS:
cloudinary.videoTag('Cloudinary_Celebrating_1', {transformation: [
  {effect: "boomerang"},
  {endOffset: "3", effect: "loop:10"}
  ]}).toHtml();
jQuery:
$.cloudinary.video("Cloudinary_Celebrating_1", {transformation: [
  {effect: "boomerang"},
  {end_offset: "3", effect: "loop:10"}
  ]})
React:
<Video publicId="Cloudinary_Celebrating_1" >
  <Transformation effect="boomerang" />
  <Transformation endOffset="3" effect="loop:10" />
</Video>
Angular:
<cl-video public-id="Cloudinary_Celebrating_1" >
  <cl-transformation effect="boomerang">
  </cl-transformation>
  <cl-transformation end-offset="3" effect="loop:10">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Effect("boomerang").Chain()
  .EndOffset("3").Effect("loop:10")).BuildVideoTag("Cloudinary_Celebrating_1")
Android:
MediaManager.get().url().transformation(new Transformation()
  .effect("boomerang").chain()
  .endOffset("3").effect("loop:10")).resourceType("video").generate("Cloudinary_Celebrating_1.mp4");
iOS:
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setEffect("boomerang").chain()
  .setEndOffset("3").setEffect("loop:10")).generate("Cloudinary_Celebrating_1.mp4")

Conclusion

Even though you might not know their proper name, you must have seen boomerang videos before. However, despite the fact that such videos have been around for years, creating them is no cakewalk for many web developers. Enter Cloudinary. Thanks to its intuitive video manipulation techniques with e_boomerang, creating boomerang videos on Cloudinary is a seamless, simple process.

Do try it out: Create a Cloudinary account first and then upload videos and add awesome effects and transformations. Problems? Thoughts? Describe them in the Comments section . We welcome your feedback.

Recent Blog Posts

The Visual Media Report: Visual Engagement and User Experience

With privacy top of mind, we wondered what we might learn from analyzing the large volume of data. What user behaviors would we discover, what regional differences might exist? What insights or early hints from different industries could we extrapolate? These questions guided us as we analyzed millions of anonymous end-user experiences and asset interactions across our platform.

Read more
How a Cloud-native DAM Platform Optimizes Customer Experiences

In today’s digital age, brands rely heavily on rich media to tell stories, foster engagement, and make emotional connections that drive results. Marketers use videos and images, tuned to customers’ interests, to create dynamic visual experiences. Digital campaigns about trips to Florida, for instance, have separate plot lines, depending on audiences’ passions for golf, deep sea fishing, or kid-friendly versus romantic getaways. Marketers expect to detect preferences, produce personalized experiences highlighting different desires, and turn digital prospects into vacationing customers. The ultimate success of a marketing campaign relies on the consistent delivery of these customer experiences, at scale.

Read more
Cloudinary’s Media Developer Experts Program

Cloudinary was founded by developers and developer-centric thinking is in our DNA. Our work with developers helps them better understand all things rich-media management and delivery is crucial to us. Now, in an effort to recognize, support, and reward the innovative leaders in that technical community, we’re excited to introduce a new Media Developer Experts (MDE) program! MDEs will leverage the Cloudinary platform to foster a community of media-management professionals; receive training and certifications to become experts within their field or audience; advance the state of media management, adoption, and best practices; and make the web more accessible.

Read more
An Eye-Opening Talk: Building Apps for the Next Billion Users in Africa

William (iChuloo) Imoh, who hails from Lagos, Nigeria, recently embarked on a U.S. speaking tour, February 20-March 12, during which he powwowed with technical and product teams and communities at such renowned enterprises as Netlify, Pluralsight, Lucidchart, Twilio, and more in Salt Lake City, Dallas, Las Vegas, and San Francisco. On March 5, he gave an enlightening talk, entitled International Developers and Development: Building for the Next Billion Users at Cloudinary in Santa Clara, California. Below is a synopsis. For details, see the related slides.

Read more
The Debut of the Cloudinary Customer Advisory Board

Focus on customers has always been Cloudinary’s mantra. Because we owe them our success, we are constantly reaching out to our customers, not just for feedback on our offerings, but also for their vision, wish list, and buy-in of what Cloudinary can do to meet their needs and make them succeed. About six months ago, it occurred to us that it would be beneficial if we could meet regularly with those who are behind innovation at our key customers—executives, product gurus, developers, content managers—to swap strategies, product roadmaps, best practices, and such. In particular, we’d like to solicit actionable feedback as a foundation for our plans of product enhancements.

Read more