Cloudinary Blog

Building a Live Feed of FIFA World Cup Moments

Capturing a Live Stream of FIFA World Cup Moments

Widely acclaimed as the world’s biggest sporting event, the World Cup has established itself as the most captivating tournament to look forward to across the globe. Dating back to 1930, when the first World Cup was hosted in Uruguay, it has always engendered numerous moments of excitement, not only for the participating teams but also for the countries they ably represented. Little could anyone have anticipated that a game of 22 able-bodied men running to take possession of a leather ball could become so famous.

This year’s World Cup is, as before, living up to expectations with countless surprising and enthralling moments. In fact, it’s been a rollercoaster of intense emotions as we’ve seen some of the football giant nations kicked out of the tournament.

If you are like me and love to savor some of the memorable moments from the 2018 FIFA World Cup, let me show you a few impressive Cloudinary features for capturing them. As a rule, professionally resizing and merging multiple videos, also adding songs as an overlay, would require access to sophisticated tools and a reasonable level of expertise on how to use them effectively. Not so with Cloudinary, which provisions for end-to-end video-management services geared toward compilation of videos in just a few simple steps without coding. I’ll walk you through them below. Also check out this interactive Twitter Tutorial thread I made!

Webinar
Delivering Compelling Video Experiences at Scale

Upload Videos

For easy access to your videos, upload them to Cloudinary and store the public ID of each of the videos.To access a video, type in the browser: https://res.cloudinary.com/YOUR_CLOUD_NAME/video/upload/ID.mp4

Replace YOUR_CLOUD_NAME and ID with the your cloud name and the video’s public ID on Cloudinary, respectively, as in this example:

Manipulate Videos

In Cloudinary, you can manipulate and thus transform videos directly from the URL by adding the required properties, for example:

Ruby:
Copy to clipboard
cl_video_tag("bade", :width=>600, :height=>300, :crop=>"fill")
PHP v1:
Copy to clipboard
cl_video_tag("bade", array("width"=>600, "height"=>300, "crop"=>"fill"))
PHP v2:
Copy to clipboard
(new VideoTag('bade.mp4'))
  ->resize(Resize::fill()->width(600)->height(300));
Python:
Copy to clipboard
CloudinaryVideo("bade").video(width=600, height=300, crop="fill")
Node.js:
Copy to clipboard
cloudinary.video("bade", {width: 600, height: 300, crop: "fill"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(600).height(300).crop("fill")).videoTag("bade");
JS:
Copy to clipboard
cloudinary.videoTag('bade', {width: 600, height: 300, crop: "fill"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("bade", {width: 600, height: 300, crop: "fill"})
React:
Copy to clipboard
<Video publicId="bade" >
  <Transformation width="600" height="300" crop="fill" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="bade" >
  <cld-transformation width="600" height="300" crop="fill" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="bade" >
  <cl-transformation width="600" height="300" crop="fill">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(600).Height(300).Crop("fill")).BuildVideoTag("bade")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(600).height(300).crop("fill")).resourceType("video").generate("bade.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setWidth(600).setHeight(300).setCrop("fill")).generate("bade.mp4")

The link above shows that you’ve dynamically resized a video on the fly by configuring its width (w) and height (h) parameters. Did you notice the size of the video, too? Now compare it with that of the original. Cool, right? You’ve changed the video’s default dimension directly from the browser, hassle free.

Concatenate Videos

With Cloudinary, you can easily concatenate two videos by configuring the overlay video parameter l_video: in the URL to show the name of another uploaded video. You can add many videos in the same way but that might be problematic because all of them will be played simultaneously.

To overlay videos and play them sequentially, add the splice flag fl_splice to the URL for concatenation.. Do the following:

Update your link to look like this:

Copy to clipboard
https://res.cloudinary.com/*YOUR_CLOUD_NAME*/video/upload/*OVERLAY_TRANSFORMATION_HERE*/*ID*.mp4 …

Replace the OVERLAY_-TRANSFORMATION_HERE variable with the appropriate parameters, for example:

l_video:*ID*,fl_splice,w_1.0,h_1.0,fl_relative,c_fill

Replace ID with the ID of the video with which you are overlaying. For example, if that video ID is suarez, your URL would look like this:

Ruby:
Copy to clipboard
cl_video_tag("bade", :transformation=>[
  {:width=>600, :height=>300, :crop=>"scale"},
  {:overlay=>"video:suarez", :flags=>["splice", "relative"], :width=>1.0, :height=>1.0, :crop=>"fill"}
  ])
PHP v1:
Copy to clipboard
cl_video_tag("bade", array("transformation"=>array(
  array("width"=>600, "height"=>300, "crop"=>"scale"),
  array("overlay"=>"video:suarez", "flags"=>array("splice", "relative"), "width"=>"1.0", "height"=>"1.0", "crop"=>"fill")
  )))
PHP v2:
Copy to clipboard
(new VideoTag('bade.mp4'))
  ->resize(Resize::scale()->width(600)->height(300))
  ->videoEdit(
      VideoEdit::concatenate(Concatenate::videoSource('suarez')
        ->transformation((new VideoTransformation())
          ->resize(Resize::fill()->width(1.0)->height(1.0)
            ->relative()
  ))));
Python:
Copy to clipboard
CloudinaryVideo("bade").video(transformation=[
  {'width': 600, 'height': 300, 'crop': "scale"},
  {'overlay': "video:suarez", 'flags': ["splice", "relative"], 'width': "1.0", 'height': "1.0", 'crop': "fill"}
  ])
Node.js:
Copy to clipboard
cloudinary.video("bade", {transformation: [
  {width: 600, height: 300, crop: "scale"},
  {overlay: "video:suarez", flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(600).height(300).crop("scale").chain()
  .overlay(new Layer().publicId("video:suarez")).flags("splice", "relative").width(1.0).height(1.0).crop("fill")).videoTag("bade");
JS:
Copy to clipboard
cloudinary.videoTag('bade', {transformation: [
  {width: 600, height: 300, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("video:suarez"), flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("bade", {transformation: [
  {width: 600, height: 300, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("video:suarez"), flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"}
  ]})
React:
Copy to clipboard
<Video publicId="bade" >
  <Transformation width="600" height="300" crop="scale" />
  <Transformation overlay="video:suarez" flags={["splice", "relative"]} width="1.0" height="1.0" crop="fill" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="bade" >
  <cld-transformation width="600" height="300" crop="scale" />
  <cld-transformation :overlay="video:suarez" flags={["splice", "relative"]} width="1.0" height="1.0" crop="fill" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="bade" >
  <cl-transformation width="600" height="300" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="video:suarez" flags={{["splice", "relative"]}} width="1.0" height="1.0" crop="fill">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(600).Height(300).Crop("scale").Chain()
  .Overlay(new Layer().PublicId("video:suarez")).Flags("splice", "relative").Width(1.0).Height(1.0).Crop("fill")).BuildVideoTag("bade")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(600).height(300).crop("scale").chain()
  .overlay(new Layer().publicId("video:suarez")).flags("splice", "relative").width(1.0).height(1.0).crop("fill")).resourceType("video").generate("bade.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(600).setHeight(300).setCrop("scale").chain()
  .setOverlay("video:suarez").setFlags("splice", "relative").setWidth(1.0).setHeight(1.0).setCrop("fill")).generate("bade.mp4")

You’ve now concatenated video suarez with video bade into a single video.

Note
..*l_video is the video with which you want to overlay.

..* fl_splice tells Cloudinary to concatenate the video, not overlay it. This parameter is crucial for the videos to play successively.

..* w_1.0,h_1.0,fl_relative,c_fill tells Cloudinary to scale the video’s width and height to fit its original dimension. 1.0 stands for 100 percent.

Add Videos

Let’s add one more video with a public ID of messi-100. Your URL would look like this:

Ruby:
Copy to clipboard
cl_video_tag("bade", :transformation=>[
  {:width=>600, :height=>300, :crop=>"scale"},
  {:overlay=>"video:suarez", :flags=>["splice", "relative"], :width=>1.0, :height=>1.0, :crop=>"fill"},
  {:overlay=>"video:messi-100", :flags=>["splice", "relative"], :width=>1.0, :height=>1.0, :crop=>"fill"}
  ])
PHP v1:
Copy to clipboard
cl_video_tag("bade", array("transformation"=>array(
  array("width"=>600, "height"=>300, "crop"=>"scale"),
  array("overlay"=>"video:suarez", "flags"=>array("splice", "relative"), "width"=>"1.0", "height"=>"1.0", "crop"=>"fill"),
  array("overlay"=>"video:messi-100", "flags"=>array("splice", "relative"), "width"=>"1.0", "height"=>"1.0", "crop"=>"fill")
  )))
PHP v2:
Copy to clipboard
(new VideoTag('bade.mp4'))
  ->resize(Resize::scale()->width(600)->height(300))
  ->videoEdit(
      VideoEdit::concatenate(Concatenate::videoSource('suarez')
        ->transformation((new VideoTransformation())
          ->resize(Resize::fill()->width(1.0)->height(1.0)->relative()))))
    ->videoEdit(
        VideoEdit::concatenate(Concatenate::videoSource('messi-100')
          ->transformation((new VideoTransformation())
            ->resize(Resize::fill()->width(1.0)->height(1.0)->relative())
      
    )));
Python:
Copy to clipboard
CloudinaryVideo("bade").video(transformation=[
  {'width': 600, 'height': 300, 'crop': "scale"},
  {'overlay': "video:suarez", 'flags': ["splice", "relative"], 'width': "1.0", 'height': "1.0", 'crop': "fill"},
  {'overlay': "video:messi-100", 'flags': ["splice", "relative"], 'width': "1.0", 'height': "1.0", 'crop': "fill"}
  ])
Node.js:
Copy to clipboard
cloudinary.video("bade", {transformation: [
  {width: 600, height: 300, crop: "scale"},
  {overlay: "video:suarez", flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {overlay: "video:messi-100", flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(600).height(300).crop("scale").chain()
  .overlay(new Layer().publicId("video:suarez")).flags("splice", "relative").width(1.0).height(1.0).crop("fill").chain()
  .overlay(new Layer().publicId("video:messi-100")).flags("splice", "relative").width(1.0).height(1.0).crop("fill")).videoTag("bade");
JS:
Copy to clipboard
cloudinary.videoTag('bade', {transformation: [
  {width: 600, height: 300, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("video:suarez"), flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("video:messi-100"), flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("bade", {transformation: [
  {width: 600, height: 300, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("video:suarez"), flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("video:messi-100"), flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"}
  ]})
React:
Copy to clipboard
<Video publicId="bade" >
  <Transformation width="600" height="300" crop="scale" />
  <Transformation overlay="video:suarez" flags={["splice", "relative"]} width="1.0" height="1.0" crop="fill" />
  <Transformation overlay="video:messi-100" flags={["splice", "relative"]} width="1.0" height="1.0" crop="fill" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="bade" >
  <cld-transformation width="600" height="300" crop="scale" />
  <cld-transformation :overlay="video:suarez" flags={["splice", "relative"]} width="1.0" height="1.0" crop="fill" />
  <cld-transformation :overlay="video:messi-100" flags={["splice", "relative"]} width="1.0" height="1.0" crop="fill" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="bade" >
  <cl-transformation width="600" height="300" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="video:suarez" flags={{["splice", "relative"]}} width="1.0" height="1.0" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="video:messi-100" flags={{["splice", "relative"]}} width="1.0" height="1.0" crop="fill">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(600).Height(300).Crop("scale").Chain()
  .Overlay(new Layer().PublicId("video:suarez")).Flags("splice", "relative").Width(1.0).Height(1.0).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("video:messi-100")).Flags("splice", "relative").Width(1.0).Height(1.0).Crop("fill")).BuildVideoTag("bade")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(600).height(300).crop("scale").chain()
  .overlay(new Layer().publicId("video:suarez")).flags("splice", "relative").width(1.0).height(1.0).crop("fill").chain()
  .overlay(new Layer().publicId("video:messi-100")).flags("splice", "relative").width(1.0).height(1.0).crop("fill")).resourceType("video").generate("bade.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(600).setHeight(300).setCrop("scale").chain()
  .setOverlay("video:suarez").setFlags("splice", "relative").setWidth(1.0).setHeight(1.0).setCrop("fill").chain()
  .setOverlay("video:messi-100").setFlags("splice", "relative").setWidth(1.0).setHeight(1.0).setCrop("fill")).generate("bade.mp4")

Mute Videos

Also in Cloudinary, you can control a video’s audio volume by configuring the volume effect parameter e_volume in the URL. In this tutorial, let’s mute the video completely with e_volume:-100 since we intend to replace the video with ours. Your URL would then look like this::

Ruby:
Copy to clipboard
cl_video_tag("bade", :transformation=>[
  {:width=>600, :height=>300, :crop=>"scale"},
  {:overlay=>"video:suarez", :flags=>["splice", "relative"], :width=>1.0, :height=>1.0, :crop=>"fill"},
  {:overlay=>"video:messi-100", :flags=>["splice", "relative"], :width=>1.0, :height=>1.0, :crop=>"fill"},
  {:effect=>"volume:-100"}
  ])
PHP v1:
Copy to clipboard
cl_video_tag("bade", array("transformation"=>array(
  array("width"=>600, "height"=>300, "crop"=>"scale"),
  array("overlay"=>"video:suarez", "flags"=>array("splice", "relative"), "width"=>"1.0", "height"=>"1.0", "crop"=>"fill"),
  array("overlay"=>"video:messi-100", "flags"=>array("splice", "relative"), "width"=>"1.0", "height"=>"1.0", "crop"=>"fill"),
  array("effect"=>"volume:-100")
  )))
PHP v2:
Copy to clipboard
(new VideoTag('bade.mp4'))
  ->resize(Resize::scale()->width(600)->height(300))
  ->videoEdit(
      VideoEdit::concatenate(Concatenate::videoSource('suarez')
        ->transformation((new VideoTransformation())
          ->resize(Resize::fill()->width(1.0)->height(1.0)->relative()))))
    ->videoEdit(
        VideoEdit::concatenate(Concatenate::videoSource('messi-100')
          ->transformation((new VideoTransformation())
            ->resize(Resize::fill()->width(1.0)->height(1.0)->relative()))))
          ->videoEdit(VideoEdit::volume(-100));
Python:
Copy to clipboard
CloudinaryVideo("bade").video(transformation=[
  {'width': 600, 'height': 300, 'crop': "scale"},
  {'overlay': "video:suarez", 'flags': ["splice", "relative"], 'width': "1.0", 'height': "1.0", 'crop': "fill"},
  {'overlay': "video:messi-100", 'flags': ["splice", "relative"], 'width': "1.0", 'height': "1.0", 'crop': "fill"},
  {'effect': "volume:-100"}
  ])
Node.js:
Copy to clipboard
cloudinary.video("bade", {transformation: [
  {width: 600, height: 300, crop: "scale"},
  {overlay: "video:suarez", flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {overlay: "video:messi-100", flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {effect: "volume:-100"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(600).height(300).crop("scale").chain()
  .overlay(new Layer().publicId("video:suarez")).flags("splice", "relative").width(1.0).height(1.0).crop("fill").chain()
  .overlay(new Layer().publicId("video:messi-100")).flags("splice", "relative").width(1.0).height(1.0).crop("fill").chain()
  .effect("volume:-100")).videoTag("bade");
JS:
Copy to clipboard
cloudinary.videoTag('bade', {transformation: [
  {width: 600, height: 300, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("video:suarez"), flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("video:messi-100"), flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {effect: "volume:-100"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("bade", {transformation: [
  {width: 600, height: 300, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("video:suarez"), flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("video:messi-100"), flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {effect: "volume:-100"}
  ]})
React:
Copy to clipboard
<Video publicId="bade" >
  <Transformation width="600" height="300" crop="scale" />
  <Transformation overlay="video:suarez" flags={["splice", "relative"]} width="1.0" height="1.0" crop="fill" />
  <Transformation overlay="video:messi-100" flags={["splice", "relative"]} width="1.0" height="1.0" crop="fill" />
  <Transformation effect="volume:-100" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="bade" >
  <cld-transformation width="600" height="300" crop="scale" />
  <cld-transformation :overlay="video:suarez" flags={["splice", "relative"]} width="1.0" height="1.0" crop="fill" />
  <cld-transformation :overlay="video:messi-100" flags={["splice", "relative"]} width="1.0" height="1.0" crop="fill" />
  <cld-transformation effect="volume:-100" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="bade" >
  <cl-transformation width="600" height="300" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="video:suarez" flags={{["splice", "relative"]}} width="1.0" height="1.0" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="video:messi-100" flags={{["splice", "relative"]}} width="1.0" height="1.0" crop="fill">
  </cl-transformation>
  <cl-transformation effect="volume:-100">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(600).Height(300).Crop("scale").Chain()
  .Overlay(new Layer().PublicId("video:suarez")).Flags("splice", "relative").Width(1.0).Height(1.0).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("video:messi-100")).Flags("splice", "relative").Width(1.0).Height(1.0).Crop("fill").Chain()
  .Effect("volume:-100")).BuildVideoTag("bade")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(600).height(300).crop("scale").chain()
  .overlay(new Layer().publicId("video:suarez")).flags("splice", "relative").width(1.0).height(1.0).crop("fill").chain()
  .overlay(new Layer().publicId("video:messi-100")).flags("splice", "relative").width(1.0).height(1.0).crop("fill").chain()
  .effect("volume:-100")).resourceType("video").generate("bade.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(600).setHeight(300).setCrop("scale").chain()
  .setOverlay("video:suarez").setFlags("splice", "relative").setWidth(1.0).setHeight(1.0).setCrop("fill").chain()
  .setOverlay("video:messi-100").setFlags("splice", "relative").setWidth(1.0).setHeight(1.0).setCrop("fill").chain()
  .setEffect("volume:-100")).generate("bade.mp4")

Customize Themes

Wrapping up, you can overlay your own sound to be played simultaneously with that in the concatenated videos. Simply upload an MP3 file and then configure the l_video: parameter to overlay it, like this:

Ruby:
Copy to clipboard
cl_video_tag("bade", :transformation=>[
  {:width=>600, :height=>300, :crop=>"scale"},
  {:overlay=>"video:suarez", :flags=>["splice", "relative"], :width=>1.0, :height=>1.0, :crop=>"fill"},
  {:overlay=>"video:messi-100", :flags=>["splice", "relative"], :width=>1.0, :height=>1.0, :crop=>"fill"},
  {:effect=>"volume:-100"},
  {:overlay=>"video:sound.mp3"}
  ])
PHP v1:
Copy to clipboard
cl_video_tag("bade", array("transformation"=>array(
  array("width"=>600, "height"=>300, "crop"=>"scale"),
  array("overlay"=>"video:suarez", "flags"=>array("splice", "relative"), "width"=>"1.0", "height"=>"1.0", "crop"=>"fill"),
  array("overlay"=>"video:messi-100", "flags"=>array("splice", "relative"), "width"=>"1.0", "height"=>"1.0", "crop"=>"fill"),
  array("effect"=>"volume:-100"),
  array("overlay"=>"video:sound.mp3")
  )))
PHP v2:
Copy to clipboard
(new VideoTag('bade.mp4'))
  ->resize(Resize::scale()->width(600)->height(300))
  ->videoEdit(
      VideoEdit::concatenate(Concatenate::videoSource('suarez')
        ->transformation((new VideoTransformation())
          ->resize(Resize::fill()->width(1.0)->height(1.0)->relative()))))
    ->videoEdit(
        VideoEdit::concatenate(Concatenate::videoSource('messi-100')
          ->transformation((new VideoTransformation())
            ->resize(Resize::fill()->width(1.0)->height(1.0)->relative()))))
          ->videoEdit(VideoEdit::volume(-100))
          ->overlay(Overlay::source(Source::video('sound.mp3')));
Python:
Copy to clipboard
CloudinaryVideo("bade").video(transformation=[
  {'width': 600, 'height': 300, 'crop': "scale"},
  {'overlay': "video:suarez", 'flags': ["splice", "relative"], 'width': "1.0", 'height': "1.0", 'crop': "fill"},
  {'overlay': "video:messi-100", 'flags': ["splice", "relative"], 'width': "1.0", 'height': "1.0", 'crop': "fill"},
  {'effect': "volume:-100"},
  {'overlay': "video:sound.mp3"}
  ])
Node.js:
Copy to clipboard
cloudinary.video("bade", {transformation: [
  {width: 600, height: 300, crop: "scale"},
  {overlay: "video:suarez", flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {overlay: "video:messi-100", flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {effect: "volume:-100"},
  {overlay: "video:sound.mp3"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(600).height(300).crop("scale").chain()
  .overlay(new Layer().publicId("video:suarez")).flags("splice", "relative").width(1.0).height(1.0).crop("fill").chain()
  .overlay(new Layer().publicId("video:messi-100")).flags("splice", "relative").width(1.0).height(1.0).crop("fill").chain()
  .effect("volume:-100").chain()
  .overlay(new Layer().publicId("video:sound.mp3"))).videoTag("bade");
JS:
Copy to clipboard
cloudinary.videoTag('bade', {transformation: [
  {width: 600, height: 300, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("video:suarez"), flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("video:messi-100"), flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {effect: "volume:-100"},
  {overlay: new cloudinary.Layer().publicId("video:sound.mp3")}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("bade", {transformation: [
  {width: 600, height: 300, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("video:suarez"), flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("video:messi-100"), flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {effect: "volume:-100"},
  {overlay: new cloudinary.Layer().publicId("video:sound.mp3")}
  ]})
React:
Copy to clipboard
<Video publicId="bade" >
  <Transformation width="600" height="300" crop="scale" />
  <Transformation overlay="video:suarez" flags={["splice", "relative"]} width="1.0" height="1.0" crop="fill" />
  <Transformation overlay="video:messi-100" flags={["splice", "relative"]} width="1.0" height="1.0" crop="fill" />
  <Transformation effect="volume:-100" />
  <Transformation overlay="video:sound.mp3" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="bade" >
  <cld-transformation width="600" height="300" crop="scale" />
  <cld-transformation :overlay="video:suarez" flags={["splice", "relative"]} width="1.0" height="1.0" crop="fill" />
  <cld-transformation :overlay="video:messi-100" flags={["splice", "relative"]} width="1.0" height="1.0" crop="fill" />
  <cld-transformation effect="volume:-100" />
  <cld-transformation :overlay="video:sound.mp3" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="bade" >
  <cl-transformation width="600" height="300" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="video:suarez" flags={{["splice", "relative"]}} width="1.0" height="1.0" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="video:messi-100" flags={{["splice", "relative"]}} width="1.0" height="1.0" crop="fill">
  </cl-transformation>
  <cl-transformation effect="volume:-100">
  </cl-transformation>
  <cl-transformation overlay="video:sound.mp3">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(600).Height(300).Crop("scale").Chain()
  .Overlay(new Layer().PublicId("video:suarez")).Flags("splice", "relative").Width(1.0).Height(1.0).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("video:messi-100")).Flags("splice", "relative").Width(1.0).Height(1.0).Crop("fill").Chain()
  .Effect("volume:-100").Chain()
  .Overlay(new Layer().PublicId("video:sound.mp3"))).BuildVideoTag("bade")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(600).height(300).crop("scale").chain()
  .overlay(new Layer().publicId("video:suarez")).flags("splice", "relative").width(1.0).height(1.0).crop("fill").chain()
  .overlay(new Layer().publicId("video:messi-100")).flags("splice", "relative").width(1.0).height(1.0).crop("fill").chain()
  .effect("volume:-100").chain()
  .overlay(new Layer().publicId("video:sound.mp3"))).resourceType("video").generate("bade.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(600).setHeight(300).setCrop("scale").chain()
  .setOverlay("video:suarez").setFlags("splice", "relative").setWidth(1.0).setHeight(1.0).setCrop("fill").chain()
  .setOverlay("video:messi-100").setFlags("splice", "relative").setWidth(1.0).setHeight(1.0).setCrop("fill").chain()
  .setEffect("volume:-100").chain()
  .setOverlay("video:sound.mp3")).generate("bade.mp4")

Add More Videos

Add more videos for a robust collection of memorable 2018 World Cup moments:

Ruby:
Copy to clipboard
cl_video_tag("bade", :transformation=>[
  {:width=>600, :height=>300, :crop=>"fill"},
  {:overlay=>"video:messi-100", :flags=>["splice", "relative"], :width=>1.0, :height=>1.0, :crop=>"fill"},
  {:overlay=>"video:suarez", :flags=>["splice", "relative"], :width=>1.0, :height=>1.0, :crop=>"fill"},
  {:overlay=>"video:nigeria", :flags=>["splice", "relative"], :width=>1.0, :height=>1.0, :crop=>"fill"},
  {:overlay=>"video:perisic", :flags=>["splice", "relative"], :width=>1.0, :height=>1.0, :crop=>"fill"},
  {:overlay=>"video:tunisia", :flags=>["splice", "relative"], :width=>1.0, :height=>1.0, :crop=>"fill"},
  {:overlay=>"video:deflection", :flags=>["splice", "relative"], :width=>1.0, :height=>1.0, :crop=>"fill"},
  {:overlay=>"video:late_winner", :flags=>["splice", "relative"], :width=>1.0, :height=>1.0, :crop=>"fill"},
  {:overlay=>"video:belgium", :flags=>["splice", "relative"], :width=>1.0, :height=>1.0, :crop=>"fill"},
  {:overlay=>"video:cavani", :flags=>["splice", "relative"], :width=>1.0, :height=>1.0, :crop=>"fill"},
  {:effect=>"volume:-100"},
  {:overlay=>"video:sound.mp3"}
  ])
PHP v1:
Copy to clipboard
cl_video_tag("bade", array("transformation"=>array(
  array("width"=>600, "height"=>300, "crop"=>"fill"),
  array("overlay"=>"video:messi-100", "flags"=>array("splice", "relative"), "width"=>"1.0", "height"=>"1.0", "crop"=>"fill"),
  array("overlay"=>"video:suarez", "flags"=>array("splice", "relative"), "width"=>"1.0", "height"=>"1.0", "crop"=>"fill"),
  array("overlay"=>"video:nigeria", "flags"=>array("splice", "relative"), "width"=>"1.0", "height"=>"1.0", "crop"=>"fill"),
  array("overlay"=>"video:perisic", "flags"=>array("splice", "relative"), "width"=>"1.0", "height"=>"1.0", "crop"=>"fill"),
  array("overlay"=>"video:tunisia", "flags"=>array("splice", "relative"), "width"=>"1.0", "height"=>"1.0", "crop"=>"fill"),
  array("overlay"=>"video:deflection", "flags"=>array("splice", "relative"), "width"=>"1.0", "height"=>"1.0", "crop"=>"fill"),
  array("overlay"=>"video:late_winner", "flags"=>array("splice", "relative"), "width"=>"1.0", "height"=>"1.0", "crop"=>"fill"),
  array("overlay"=>"video:belgium", "flags"=>array("splice", "relative"), "width"=>"1.0", "height"=>"1.0", "crop"=>"fill"),
  array("overlay"=>"video:cavani", "flags"=>array("splice", "relative"), "width"=>"1.0", "height"=>"1.0", "crop"=>"fill"),
  array("effect"=>"volume:-100"),
  array("overlay"=>"video:sound.mp3")
  )))
PHP v2:
Copy to clipboard
(new VideoTag('bade.mp4'))
  ->resize(Resize::fill()->width(600)->height(300))
  ->videoEdit(
      VideoEdit::concatenate(Concatenate::videoSource('messi-100')
        ->transformation((new VideoTransformation())
          ->resize(Resize::fill()->width(1.0)->height(1.0)->relative()))))
    ->videoEdit(
        VideoEdit::concatenate(Concatenate::videoSource('suarez')
          ->transformation((new VideoTransformation())
            ->resize(Resize::fill()->width(1.0)->height(1.0)->relative()))))
          ->videoEdit(
              VideoEdit::concatenate(Concatenate::videoSource('nigeria')
                ->transformation((new VideoTransformation())
                  ->resize(Resize::fill()->width(1.0)->height(1.0)->relative()))))
            ->videoEdit(
                VideoEdit::concatenate(Concatenate::videoSource('perisic')
                  ->transformation((new VideoTransformation())
                    ->resize(Resize::fill()->width(1.0)->height(1.0)->relative()))))
                  ->videoEdit(
                      VideoEdit::concatenate(Concatenate::videoSource('tunisia')
                        ->transformation((new VideoTransformation())
                          ->resize(Resize::fill()->width(1.0)->height(1.0)->relative()))))
                    ->videoEdit(
                        VideoEdit::concatenate(Concatenate::videoSource('deflection')
                          ->transformation((new VideoTransformation())
                            ->resize(Resize::fill()->width(1.0)->height(1.0)->relative()))))
                          ->videoEdit(
                              VideoEdit::concatenate(Concatenate::videoSource('late_winner')
                                ->transformation((new VideoTransformation())
                                  ->resize(Resize::fill()->width(1.0)->height(1.0)->relative()))))
                            ->videoEdit(
                                VideoEdit::concatenate(Concatenate::videoSource('belgium')
                                  ->transformation((new VideoTransformation())
                                    ->resize(Resize::fill()->width(1.0)->height(1.0)->relative()))))
                                  ->videoEdit(
                                      VideoEdit::concatenate(Concatenate::videoSource('cavani')
                                        ->transformation((new VideoTransformation())
                                          ->resize(Resize::fill()->width(1.0)->height(1.0)->relative()))))
                                    ->videoEdit(VideoEdit::volume(-100))
                                    ->overlay(Overlay::source(Source::video('sound.mp3')));
Python:
Copy to clipboard
CloudinaryVideo("bade").video(transformation=[
  {'width': 600, 'height': 300, 'crop': "fill"},
  {'overlay': "video:messi-100", 'flags': ["splice", "relative"], 'width': "1.0", 'height': "1.0", 'crop': "fill"},
  {'overlay': "video:suarez", 'flags': ["splice", "relative"], 'width': "1.0", 'height': "1.0", 'crop': "fill"},
  {'overlay': "video:nigeria", 'flags': ["splice", "relative"], 'width': "1.0", 'height': "1.0", 'crop': "fill"},
  {'overlay': "video:perisic", 'flags': ["splice", "relative"], 'width': "1.0", 'height': "1.0", 'crop': "fill"},
  {'overlay': "video:tunisia", 'flags': ["splice", "relative"], 'width': "1.0", 'height': "1.0", 'crop': "fill"},
  {'overlay': "video:deflection", 'flags': ["splice", "relative"], 'width': "1.0", 'height': "1.0", 'crop': "fill"},
  {'overlay': "video:late_winner", 'flags': ["splice", "relative"], 'width': "1.0", 'height': "1.0", 'crop': "fill"},
  {'overlay': "video:belgium", 'flags': ["splice", "relative"], 'width': "1.0", 'height': "1.0", 'crop': "fill"},
  {'overlay': "video:cavani", 'flags': ["splice", "relative"], 'width': "1.0", 'height': "1.0", 'crop': "fill"},
  {'effect': "volume:-100"},
  {'overlay': "video:sound.mp3"}
  ])
Node.js:
Copy to clipboard
cloudinary.video("bade", {transformation: [
  {width: 600, height: 300, crop: "fill"},
  {overlay: "video:messi-100", flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {overlay: "video:suarez", flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {overlay: "video:nigeria", flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {overlay: "video:perisic", flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {overlay: "video:tunisia", flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {overlay: "video:deflection", flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {overlay: "video:late_winner", flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {overlay: "video:belgium", flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {overlay: "video:cavani", flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {effect: "volume:-100"},
  {overlay: "video:sound.mp3"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(600).height(300).crop("fill").chain()
  .overlay(new Layer().publicId("video:messi-100")).flags("splice", "relative").width(1.0).height(1.0).crop("fill").chain()
  .overlay(new Layer().publicId("video:suarez")).flags("splice", "relative").width(1.0).height(1.0).crop("fill").chain()
  .overlay(new Layer().publicId("video:nigeria")).flags("splice", "relative").width(1.0).height(1.0).crop("fill").chain()
  .overlay(new Layer().publicId("video:perisic")).flags("splice", "relative").width(1.0).height(1.0).crop("fill").chain()
  .overlay(new Layer().publicId("video:tunisia")).flags("splice", "relative").width(1.0).height(1.0).crop("fill").chain()
  .overlay(new Layer().publicId("video:deflection")).flags("splice", "relative").width(1.0).height(1.0).crop("fill").chain()
  .overlay(new Layer().publicId("video:late_winner")).flags("splice", "relative").width(1.0).height(1.0).crop("fill").chain()
  .overlay(new Layer().publicId("video:belgium")).flags("splice", "relative").width(1.0).height(1.0).crop("fill").chain()
  .overlay(new Layer().publicId("video:cavani")).flags("splice", "relative").width(1.0).height(1.0).crop("fill").chain()
  .effect("volume:-100").chain()
  .overlay(new Layer().publicId("video:sound.mp3"))).videoTag("bade");
JS:
Copy to clipboard
cloudinary.videoTag('bade', {transformation: [
  {width: 600, height: 300, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("video:messi-100"), flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("video:suarez"), flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("video:nigeria"), flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("video:perisic"), flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("video:tunisia"), flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("video:deflection"), flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("video:late_winner"), flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("video:belgium"), flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("video:cavani"), flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {effect: "volume:-100"},
  {overlay: new cloudinary.Layer().publicId("video:sound.mp3")}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("bade", {transformation: [
  {width: 600, height: 300, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("video:messi-100"), flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("video:suarez"), flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("video:nigeria"), flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("video:perisic"), flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("video:tunisia"), flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("video:deflection"), flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("video:late_winner"), flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("video:belgium"), flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("video:cavani"), flags: ["splice", "relative"], width: "1.0", height: "1.0", crop: "fill"},
  {effect: "volume:-100"},
  {overlay: new cloudinary.Layer().publicId("video:sound.mp3")}
  ]})
React:
Copy to clipboard
<Video publicId="bade" >
  <Transformation width="600" height="300" crop="fill" />
  <Transformation overlay="video:messi-100" flags={["splice", "relative"]} width="1.0" height="1.0" crop="fill" />
  <Transformation overlay="video:suarez" flags={["splice", "relative"]} width="1.0" height="1.0" crop="fill" />
  <Transformation overlay="video:nigeria" flags={["splice", "relative"]} width="1.0" height="1.0" crop="fill" />
  <Transformation overlay="video:perisic" flags={["splice", "relative"]} width="1.0" height="1.0" crop="fill" />
  <Transformation overlay="video:tunisia" flags={["splice", "relative"]} width="1.0" height="1.0" crop="fill" />
  <Transformation overlay="video:deflection" flags={["splice", "relative"]} width="1.0" height="1.0" crop="fill" />
  <Transformation overlay="video:late_winner" flags={["splice", "relative"]} width="1.0" height="1.0" crop="fill" />
  <Transformation overlay="video:belgium" flags={["splice", "relative"]} width="1.0" height="1.0" crop="fill" />
  <Transformation overlay="video:cavani" flags={["splice", "relative"]} width="1.0" height="1.0" crop="fill" />
  <Transformation effect="volume:-100" />
  <Transformation overlay="video:sound.mp3" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="bade" >
  <cld-transformation width="600" height="300" crop="fill" />
  <cld-transformation :overlay="video:messi-100" flags={["splice", "relative"]} width="1.0" height="1.0" crop="fill" />
  <cld-transformation :overlay="video:suarez" flags={["splice", "relative"]} width="1.0" height="1.0" crop="fill" />
  <cld-transformation :overlay="video:nigeria" flags={["splice", "relative"]} width="1.0" height="1.0" crop="fill" />
  <cld-transformation :overlay="video:perisic" flags={["splice", "relative"]} width="1.0" height="1.0" crop="fill" />
  <cld-transformation :overlay="video:tunisia" flags={["splice", "relative"]} width="1.0" height="1.0" crop="fill" />
  <cld-transformation :overlay="video:deflection" flags={["splice", "relative"]} width="1.0" height="1.0" crop="fill" />
  <cld-transformation :overlay="video:late_winner" flags={["splice", "relative"]} width="1.0" height="1.0" crop="fill" />
  <cld-transformation :overlay="video:belgium" flags={["splice", "relative"]} width="1.0" height="1.0" crop="fill" />
  <cld-transformation :overlay="video:cavani" flags={["splice", "relative"]} width="1.0" height="1.0" crop="fill" />
  <cld-transformation effect="volume:-100" />
  <cld-transformation :overlay="video:sound.mp3" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="bade" >
  <cl-transformation width="600" height="300" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="video:messi-100" flags={{["splice", "relative"]}} width="1.0" height="1.0" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="video:suarez" flags={{["splice", "relative"]}} width="1.0" height="1.0" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="video:nigeria" flags={{["splice", "relative"]}} width="1.0" height="1.0" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="video:perisic" flags={{["splice", "relative"]}} width="1.0" height="1.0" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="video:tunisia" flags={{["splice", "relative"]}} width="1.0" height="1.0" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="video:deflection" flags={{["splice", "relative"]}} width="1.0" height="1.0" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="video:late_winner" flags={{["splice", "relative"]}} width="1.0" height="1.0" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="video:belgium" flags={{["splice", "relative"]}} width="1.0" height="1.0" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="video:cavani" flags={{["splice", "relative"]}} width="1.0" height="1.0" crop="fill">
  </cl-transformation>
  <cl-transformation effect="volume:-100">
  </cl-transformation>
  <cl-transformation overlay="video:sound.mp3">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(600).Height(300).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("video:messi-100")).Flags("splice", "relative").Width(1.0).Height(1.0).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("video:suarez")).Flags("splice", "relative").Width(1.0).Height(1.0).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("video:nigeria")).Flags("splice", "relative").Width(1.0).Height(1.0).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("video:perisic")).Flags("splice", "relative").Width(1.0).Height(1.0).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("video:tunisia")).Flags("splice", "relative").Width(1.0).Height(1.0).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("video:deflection")).Flags("splice", "relative").Width(1.0).Height(1.0).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("video:late_winner")).Flags("splice", "relative").Width(1.0).Height(1.0).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("video:belgium")).Flags("splice", "relative").Width(1.0).Height(1.0).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("video:cavani")).Flags("splice", "relative").Width(1.0).Height(1.0).Crop("fill").Chain()
  .Effect("volume:-100").Chain()
  .Overlay(new Layer().PublicId("video:sound.mp3"))).BuildVideoTag("bade")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(600).height(300).crop("fill").chain()
  .overlay(new Layer().publicId("video:messi-100")).flags("splice", "relative").width(1.0).height(1.0).crop("fill").chain()
  .overlay(new Layer().publicId("video:suarez")).flags("splice", "relative").width(1.0).height(1.0).crop("fill").chain()
  .overlay(new Layer().publicId("video:nigeria")).flags("splice", "relative").width(1.0).height(1.0).crop("fill").chain()
  .overlay(new Layer().publicId("video:perisic")).flags("splice", "relative").width(1.0).height(1.0).crop("fill").chain()
  .overlay(new Layer().publicId("video:tunisia")).flags("splice", "relative").width(1.0).height(1.0).crop("fill").chain()
  .overlay(new Layer().publicId("video:deflection")).flags("splice", "relative").width(1.0).height(1.0).crop("fill").chain()
  .overlay(new Layer().publicId("video:late_winner")).flags("splice", "relative").width(1.0).height(1.0).crop("fill").chain()
  .overlay(new Layer().publicId("video:belgium")).flags("splice", "relative").width(1.0).height(1.0).crop("fill").chain()
  .overlay(new Layer().publicId("video:cavani")).flags("splice", "relative").width(1.0).height(1.0).crop("fill").chain()
  .effect("volume:-100").chain()
  .overlay(new Layer().publicId("video:sound.mp3"))).resourceType("video").generate("bade.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(600).setHeight(300).setCrop("fill").chain()
  .setOverlay("video:messi-100").setFlags("splice", "relative").setWidth(1.0).setHeight(1.0).setCrop("fill").chain()
  .setOverlay("video:suarez").setFlags("splice", "relative").setWidth(1.0).setHeight(1.0).setCrop("fill").chain()
  .setOverlay("video:nigeria").setFlags("splice", "relative").setWidth(1.0).setHeight(1.0).setCrop("fill").chain()
  .setOverlay("video:perisic").setFlags("splice", "relative").setWidth(1.0).setHeight(1.0).setCrop("fill").chain()
  .setOverlay("video:tunisia").setFlags("splice", "relative").setWidth(1.0).setHeight(1.0).setCrop("fill").chain()
  .setOverlay("video:deflection").setFlags("splice", "relative").setWidth(1.0).setHeight(1.0).setCrop("fill").chain()
  .setOverlay("video:late_winner").setFlags("splice", "relative").setWidth(1.0).setHeight(1.0).setCrop("fill").chain()
  .setOverlay("video:belgium").setFlags("splice", "relative").setWidth(1.0).setHeight(1.0).setCrop("fill").chain()
  .setOverlay("video:cavani").setFlags("splice", "relative").setWidth(1.0).setHeight(1.0).setCrop("fill").chain()
  .setEffect("volume:-100").chain()
  .setOverlay("video:sound.mp3")).generate("bade.mp4")

Congratulations! You’ve just built your own FIFA World Cup moments with a customized theme sound.

Explore Cloudinary

As shown above, you can easily leverage some of Cloudinary’s awesome video-management features to create wonderful effects. The sky is the limit to what you can achieve.

Do create an account on Cloudinary and check out its documentation for more fabulous features.


Further Reading on Video Manipulation

Recent Blog Posts

Automate the Staging Process of Videos for Social Media

Rich and engaging media helps build customer engagement and trust but can be time consuming to stage. Developers save a tremendous amount of time by preparing videos for social media with Cloudinary. That’s because Cloudinary’s interface, widgets, and application programming interface (API) transform raw media into polished content, optimizing footage and enabling effortless customization and publishing.

Read more

Top Five Web-Video Formats of 2021

By William Imoh
The Five Most Popular Web-Video Formats and Streaming Protocols

Over the past 15 years, the video industry has undergone a significant change in video formats on the web. In particular, in the early 2010s, the 3GP format, which the 3rd Generation Partnership Project (3GPP) created for 3G-enabled mobile devices, went nearly extinct. The advancement of mobile devices and cellular networks has brought about the need for pioneers to build better formats for a faster user experience.

Read more
Cloudinary Introduces Integration With SAP Commerce Cloud

We’re excited to announce Cloudinary’s integration with SAP Commerce Cloud, through which the latter’s customers can significantly boost the visual media experience on their website or app.

SAP Commerce Cloud powers some of the largest e-commerce sites (B2C, B2B, and B2B2C businesses), complete with building blocks like storefront design and order management. Reinforced with Cloudinary’s laser-sharp focus on optimizing, managing, and delivering images and videos, the new extension will enable SAP Commerce Cloud customers to create unique and engaging visual experiences effortlessly.

Read more
Personalizing Video Email for Marketing Campaigns With Cloudinary

As critical as it is to engage with shoppers in order to succeed in e-commerce, old-style, boring emails are far from being effective. In fact, they tend to be annoying because no one likes to read formulaic, generic messages that are sent en masse. For better results, rethink your email marketing campaigns and try out creative strategies.

Read more
Muted Videos and Subtitles

The bane of our existence is the lack of efficient ways for tackling the plethora of recurring tasks in our lives. One of those tasks is surfing the internet. We consume a lot of web content daily, of which a large percentage are images and videos. We’re constantly quickly scrolling through 30-second videos or checking out pictures of cute items we’d like to buy in our free time.

Read more

Building a Roommate-Matching App With Cloudinary and Jamstack

By Marcelo Ricardo de Oliveira
Building a Roommate-Matching App With Cloudinary and Jamstack

Roommate matching can be a pain—especially during the COVID pandemic when people don't want to meet in person. Matching apps like Flatmates, Roomster, and roommates.com are helpful, and if you're in the roommate-matching space, you know that great video is essential for those seeking roommates. Fortunately, Cloudinary can help.

Read more