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.

Webinar
Delivering Compelling Video Experiences at Scale

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:
Copy to clipboard
cl_video_tag("Cloudinary_Celebrating_1", :effect=>"boomerang")
PHP v1:
Copy to clipboard
cl_video_tag("Cloudinary_Celebrating_1", array("effect"=>"boomerang"))
PHP v2:
Copy to clipboard
(new VideoTag('Cloudinary_Celebrating_1.mp4'))
  ->effect(Effect::boomerang());
Python:
Copy to clipboard
CloudinaryVideo("Cloudinary_Celebrating_1").video(effect="boomerang")
Node.js:
Copy to clipboard
cloudinary.video("Cloudinary_Celebrating_1", {effect: "boomerang"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("boomerang")).videoTag("Cloudinary_Celebrating_1");
JS:
Copy to clipboard
cloudinary.videoTag('Cloudinary_Celebrating_1', {effect: "boomerang"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("Cloudinary_Celebrating_1", {effect: "boomerang"})
React:
Copy to clipboard
<Video publicId="Cloudinary_Celebrating_1" >
  <Transformation effect="boomerang" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="Cloudinary_Celebrating_1" >
  <cld-transformation effect="boomerang" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="Cloudinary_Celebrating_1" >
  <cl-transformation effect="boomerang">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Effect("boomerang")).BuildVideoTag("Cloudinary_Celebrating_1")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("boomerang")).resourceType("video").generate("Cloudinary_Celebrating_1.mp4");
iOS:
Copy to clipboard
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:
Copy to clipboard
cl_video_tag("Cloudinary_Celebrating_1", :transformation=>[
  {:effect=>"boomerang"},
  {:end_offset=>"3"}
  ])
PHP v1:
Copy to clipboard
cl_video_tag("Cloudinary_Celebrating_1", array("transformation"=>array(
  array("effect"=>"boomerang"),
  array("end_offset"=>"3")
  )))
PHP v2:
Copy to clipboard
(new VideoTag('Cloudinary_Celebrating_1.mp4'))
  ->effect(Effect::boomerang())
  ->videoEdit(VideoEdit::trim()->endOffset(3));
Python:
Copy to clipboard
CloudinaryVideo("Cloudinary_Celebrating_1").video(transformation=[
  {'effect': "boomerang"},
  {'end_offset': "3"}
  ])
Node.js:
Copy to clipboard
cloudinary.video("Cloudinary_Celebrating_1", {transformation: [
  {effect: "boomerang"},
  {end_offset: "3"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .effect("boomerang").chain()
  .endOffset("3")).videoTag("Cloudinary_Celebrating_1");
JS:
Copy to clipboard
cloudinary.videoTag('Cloudinary_Celebrating_1', {transformation: [
  {effect: "boomerang"},
  {endOffset: "3"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("Cloudinary_Celebrating_1", {transformation: [
  {effect: "boomerang"},
  {end_offset: "3"}
  ]})
React:
Copy to clipboard
<Video publicId="Cloudinary_Celebrating_1" >
  <Transformation effect="boomerang" />
  <Transformation endOffset="3" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="Cloudinary_Celebrating_1" >
  <cld-transformation effect="boomerang" />
  <cld-transformation endOffset="3" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="Cloudinary_Celebrating_1" >
  <cl-transformation effect="boomerang">
  </cl-transformation>
  <cl-transformation end-offset="3">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Effect("boomerang").Chain()
  .EndOffset("3")).BuildVideoTag("Cloudinary_Celebrating_1")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .effect("boomerang").chain()
  .endOffset("3")).resourceType("video").generate("Cloudinary_Celebrating_1.mp4");
iOS:
Copy to clipboard
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:
Copy to clipboard
cl_video_tag("Cloudinary_Celebrating_1", :transformation=>[
  {:effect=>"boomerang"},
  {:end_offset=>"3", :effect=>"loop:10"}
  ])
PHP v1:
Copy to clipboard
cl_video_tag("Cloudinary_Celebrating_1", array("transformation"=>array(
  array("effect"=>"boomerang"),
  array("end_offset"=>"3", "effect"=>"loop:10")
  )))
PHP v2:
Copy to clipboard
(new VideoTag('Cloudinary_Celebrating_1.mp4'))
  ->effect(Effect::boomerang())
  ->videoEdit(VideoEdit::trim()->endOffset(3))
  ->effect(Effect::loop()->additionalIterations(10));
Python:
Copy to clipboard
CloudinaryVideo("Cloudinary_Celebrating_1").video(transformation=[
  {'effect': "boomerang"},
  {'end_offset': "3", 'effect': "loop:10"}
  ])
Node.js:
Copy to clipboard
cloudinary.video("Cloudinary_Celebrating_1", {transformation: [
  {effect: "boomerang"},
  {end_offset: "3", effect: "loop:10"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .effect("boomerang").chain()
  .endOffset("3").effect("loop:10")).videoTag("Cloudinary_Celebrating_1");
JS:
Copy to clipboard
cloudinary.videoTag('Cloudinary_Celebrating_1', {transformation: [
  {effect: "boomerang"},
  {endOffset: "3", effect: "loop:10"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("Cloudinary_Celebrating_1", {transformation: [
  {effect: "boomerang"},
  {end_offset: "3", effect: "loop:10"}
  ]})
React:
Copy to clipboard
<Video publicId="Cloudinary_Celebrating_1" >
  <Transformation effect="boomerang" />
  <Transformation endOffset="3" effect="loop:10" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="Cloudinary_Celebrating_1" >
  <cld-transformation effect="boomerang" />
  <cld-transformation endOffset="3" effect="loop:10" />
</cld-video>
Angular:
Copy to clipboard
<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:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Effect("boomerang").Chain()
  .EndOffset("3").Effect("loop:10")).BuildVideoTag("Cloudinary_Celebrating_1")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .effect("boomerang").chain()
  .endOffset("3").effect("loop:10")).resourceType("video").generate("Cloudinary_Celebrating_1.mp4");
iOS:
Copy to clipboard
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

Creating an API With Python Flask to Upload Files to Cloudinary

Code

Cloudinary offers SDKs for many programming languages and frameworks. Even though it also offers an Upload API endpoint for both back-end and front-end code, most developers find the SDKs very helpful. If you're working with a powerful back-end framework like Python Flask, you'll be happy to hear that a Python SDK is now available.
This tutorial walks you through the process of building an API to upload images to Cloudinary. You can also upload other file types, including video and even nonmedia files, with the API.

Read more
How to Use the Cloudinary Media Editor Widget

At Cloudinary, we manage the entire pipeline of media assets for thousands of customers of varying sizes from numerous verticals.

As part of our commitment to support the entire flow of media assets, we are now introducing an intuitive media editing widget: an out­-of­-the-­box, interactive UI providing your users with a set of common image editing actions for immediate use on your website or web app. The widget is interactive and simple, built on Cloudinary's transformation capabilities, and requiring only a few lines of code to integrate. Afterwards, you can seamlessly and effortlessly add content to your site or app with no need for in-house image editing capabilities.

Read more
Shoppable Video Is Becoming Popular in E-Commerce

As pandemic restrictions necessitated, many shopping trips in 2020 took place outside the traditional brick-and-mortar store, or at least void of the physical aisle-browsing experience. Same-day curbside pickup became a safe and convenient alternative, and e-commerce transactions skyrocketed as consumers shopped online. In fact, Digital Commerce 360 estimates that, compared to 2019, e-commerce transactions grew by more than 40% last year.

Read more
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