A watermark can go a long way. Whether it's for advertising your brand, protecting your content — or both — a watermark is something any video creator should take into consideration. Unfortunately, these watermarks aren't always pretty. Covering parts of your video with a static image can be intrusive at best and unacceptable at worst. Luckily, here at Transloadit, we have been working to remedy this 😄

Since June last year, three new watermark-related parameters were developed to both help our users fine-tune their watermarks and overcome the initial limitation, which was actually a result of our previous watermark-related parameters. These new parameters are:

  • watermark_opacity
  • watermark_x_offset
  • watermark_y_offset

The names speak for themselves, but nothing beats a good example. We'll run through the transition of taking this beautiful video (of Himeji Castle in Osaka, Japan) and applying the Transloadit logo as a watermark placed in a pixel-perfect location with a designated opacity. Afterward, we will upload the video to YouTube - where protecting your content is a constant hot topic.

/video/encode Robot

Applying opacity

One of the most important factors of a watermark is its opacity. With reduced opacity in the logo, we can apply it to our chosen video without the fear of any information being hidden from view. To do so, we can use the watermark_opacity parameter within the Assembly shown below:

{
  "steps": {
    ":original": {
      "robot": "/upload/handle"
    },
    "watermarked": {
      "use": [":original"],
      "robot": "/video/encode",
      "result": true,
      "ffmpeg": {
        "b:v": "3200k",
        "maxrate": "3200k",
        "bufsize": "3200k",
        "bt": "4800k"
      },
      "ffmpeg_stack": "v6.0.0",
      "preset": "hls-1080p",
      "watermark_size": "20%",
      "watermark_position": "center",
      "watermark_opacity": 0.8,
      "watermark_url": "/assets/images/blog/2019-02-20-watermark-parameters-2.png"
    },
    "exported": {
      "use": ["watermarked"],
      "robot": "/youtube/store",
      "category": "science & technology",
      "credentials": "youtube_auth_1547152689",
      "description": "Himeji castle with the transloadit watermark",
      "keywords": "transloadit, japan, castle, watermark",
      "title": "Transloadit: Watermarked Video Example",
      "visibility": "private"
    }
  }
}

The Robots used in this example are:

  • /upload/handle - To grab the video we want to upload. In this case, an mp4 file.
  • /video/encode - To perform encoding steps on the imported video. In this case, to add a watermark.
  • /youtube/store - To export the results to a YouTube account, complete with a category, title, description and visibility.

With the watermark_opacity parameter set to 0.8, my video looks like this:

Moving the watermark

The watermark_position parameter works just fine, but in this case I would prefer to have more precise control over the placement of the watermark. Instead of the center placement provided by the watermark_position parameter, I'd like to put the watermark slightly higher and further to the right, so the watermark is hiding in the trees. Using the watermark_x_offset and watermark_y_offset parameters, this can be achieved with ease. Look at the Assembly below and check the small additions to the /video/encode Robot's Steps:

{
  "steps": {
    ":original": {
      "robot": "/upload/handle"
    },
    "watermarked": {
      "use": [":original"],
      "robot": "/video/encode",
      "result": true,
      "ffmpeg": {
        "b:v": "3200k",
        "maxrate": "3200k",
        "bufsize": "3200k",
        "bt": "4800k"
      },
      "ffmpeg_stack": "v6.0.0",
      "preset": "hls-1080p",
      "watermark_size": "20%",
      "watermark_position": "center",
      "watermark_x_offset": 660,
      "watermark_y_offset": -400,
      "watermark_opacity": 0.8,
      "watermark_url": "/assets/images/blog/2019-02-20-watermark-parameters-3.png"
    },
    "exported": {
      "use": ["watermarked"],
      "robot": "/youtube/store",
      "category": "science & technology",
      "credentials": "youtube_auth_1547152689",
      "description": "Himeji castle with the transloadit watermark",
      "keywords": "transloadit, japan, castle, watermark",
      "title": "Transloadit: Watermarked Video Example",
      "visibility": "private"
    }
  }
}

The results

You can see the results below:

An aesthetically pleasing watermark in the right place can make the difference between an amateur-looking video and a professional one. Here at Transloadit, we are always looking to make small features like this as simple and easy-to-implement as possible.

That's it for our showcase, hope you've enjoyed it — and happy watermarking!