Cloudinary Blog

Building a Live Feed of FIFA World Cup Moments

Building a Live Feed 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!

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/YOURCLOUDNAME/video/upload/ID.mp4

Replace YOURCLOUDNAME 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:
cl_video_tag("bade", :width=>600, :height=>300, :crop=>"fill")
PHP:
cl_video_tag("bade", array("width"=>600, "height"=>300, "crop"=>"fill"))
Python:
CloudinaryVideo("bade").video(width=600, height=300, crop="fill")
Node.js:
cloudinary.video("bade", {width: 600, height: 300, crop: "fill"})
Java:
cloudinary.url().transformation(new Transformation().width(600).height(300).crop("fill")).videoTag("bade");
JS:
cloudinary.videoTag('bade', {width: 600, height: 300, crop: "fill"}).toHtml();
jQuery:
$.cloudinary.video("bade", {width: 600, height: 300, crop: "fill"})
React:
<Video publicId="bade" >
  <Transformation width="600" height="300" crop="fill" />
</Video>
Angular:
<cl-video public-id="bade" >
  <cl-transformation width="600" height="300" crop="fill">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(600).Height(300).Crop("fill")).BuildVideoTag("bade")
Android:
MediaManager.get().url().transformation(new Transformation().width(600).height(300).crop("fill")).resourceType("video").generate("bade.mp4");
iOS:
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:

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

Replace the OVERLAY-TRANSFORMATIONHERE 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:
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:
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")
  )))
Python:
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:
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:
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:
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:
$.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:
<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>
Angular:
<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:
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:
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:
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:
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:
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")
  )))
Python:
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:
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:
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:
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:
$.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:
<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>
Angular:
<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:
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:
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:
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:
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:
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")
  )))
Python:
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:
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:
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:
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:
$.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:
<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>
Angular:
<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:
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:
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:
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:
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:
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")
  )))
Python:
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:
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:
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:
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:
$.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:
<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>
Angular:
<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:
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:
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:
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:
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:
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")
  )))
Python:
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:
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:
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:
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:
$.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:
<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>
Angular:
<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:
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:
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:
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.

Recent Blog Posts

Mobile Optimization: Optimize Your Mobile-Web User Experience

TL;DR

We live in a visual world, often while on the go, and consumers expect media-rich web content. Accordingly, the loading speed of images and videos is a big factor in user experience. To optimize customer satisfaction with your mobile content, you must focus on the quality, format, and size of your digital assets. With Cloudinary, optimization is simple, not only enhancing your mobile web and app performance, but also upping your SEO game and boosting customer experience.

Read more
Multi Codec Adaptive Bitrate Streaming

In Part I of this series, we discussed the optimal way to deliver progressive video streams, taking advantage of modern, efficient codecs. That approach works great for short-form videos (under 20 seconds) and for videos that are displayed at a low resolution (such as ads and previews). But what if you're delivering videos that are longer than 20 seconds for a higher-resolution experience? You can certainly still deliver them as a single file (progressive streaming), but you might run into issues, such as buffering or too high a resolution.

Read more
Why Visual Storytelling Matters

In my communications role here at Cloudinary, I get to speak to a lot of experts across a variety of subject matter areas, technology and not, about what it takes to connect to today’s consumer. The power of images and other forms of digital content is often at the center of these conversations given our focus at Cloudinary. And as a hobbyist and professional photographer for more than 20 years, I care deeply about images and their role in creating authentic connections and engagement.

Read more
How to Automatically Generate alt Text for Images

Images and videos are critical for ensuring user engagement on the web. For instance, on a retail website, images of a product from different angles or a 360-degree video of the product can lead to higher conversion rates. For a news website, users are more likely to read articles with visual media accompanying the content. It has been reported that posts that include images produce a 650-percent higher user-engagement rate than text-only posts.

Read more