Skip to main content
Dynamic watermarking protects videos from piracy, screen-recording, and unauthorized redistribution. Unlike static overlays, a dynamic watermark moves across the video, making it much harder to crop or remove. This ensures:
  • ✔ Branding stays visible
  • ✔ Content is traceable
  • ✔ Users are discouraged from unauthorized sharing
  • ✔ You can bind each playback session to a specific user or device

​
Quick start (copy/paste)

  1. Copy the config below and set the text values for your brand + user/session identifier.
  2. Run encodeWatermarkConfig(config) in your app/console to get the Base64 string.
  3. Append &watermark=<Base64> to your Vidinfra player URL (see embed example).
  4. Paste the iframe snippet into your page and adjust sizing if needed.
  5. Verify playback: the watermark should be visible, readable, and moving every few seconds.

​
Prerequisites

  • A Vidinfra player URL (e.g., https://player.vidinfra.com/.../default/...).
  • A way to identify the viewer (user ID, email hash, session ID).
  • Ability to run a small JS helper to encode the watermark payload.

​
Watermark Configuration Example

Below is an example configuration with a static brand watermark ("MyVideoApp") and a dynamic user watermark ("User: 1827439") that moves every 3.5 seconds. 
const watermarkConfig = [
  {
    text: "vidinfra player",
    font: "Arial",
    fontSize: 20,
    fillStyle: "rgba(255,255,255,0.8)",
    padding: 8,
    opacity: 0.9,
  },
  {
    text: "User: 1827439",
    font: "Roboto",
    fontSize: 18,
    fillStyle: "rgba(255, 255, 255, 0.6)",
    strokeStyle: "rgba(0, 0, 0, 0.3)",
    padding: 6,
    opacity: 0.85,
    moveIntervalMs: 3500, // moves every 3.5 seconds
  },
];

​
Property Breakdown

PropertyDescription
textContent displayed (brand name, user ID, etc.)
fontFont family
fontSizeText size (px)
fillStyleText color and opacity
strokeStyleOutline for visibility
paddingSpace between watermark and video edges
opacityTransparency level
moveIntervalMsMovement frequency for dynamic watermark

​
Encoding Watermark Configuration

Convert the configuration to Base64 to embed in the player URL. 
function encodeWatermarkConfig(config) {
  const jsonString = JSON.stringify(config);
  // UTF-8 → Base64
  return btoa(
    Array.from(new TextEncoder().encode(jsonString))
      .map(byte => String.fromCharCode(byte))
      .join("")
  );
}
Tip: In Node, replace btoa with Buffer.from(jsonString).toString("base64").

​
Generated Base64 Output

Use this encoded value in your player URL: W3sidGV4dCI6Ik15VmlkZW9BcHAiLCJmb250IjoiQXJpYWwiLCJmb250U2l6ZSI6MjAsImZpbGxTdHlsZSI6InJnYmEoMjU1LDI1NSwyNTUsMC44KSIsInBhZGRpbmciOjgsIm9wYWNpdHkiOjAuOX0seyJ0ZXh0IjoiVXNlcjogMTgyNzQzOSIsImZvbnQiOiJSb2JvdG8iLCJmb250U2l6ZSI6MTgsImZpbGxTdHlsZSI6InJnYmEoMjU1LCAyNTUsIDI1NSwgMC42KSIsInN0cm9rZVN0eWxlIjoicmdiYSgwLCAwLCAwLCAwLjMpIiwicGFkZGluZyI6Niwib3BhY2l0eSI6MC44NSwibW92ZUludGVydmFsTXMiOjM1MDB9XQ==

​
Embedding the Watermark Into the Player

Add the Base64 configuration to the watermark= parameter of your player URL. 
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe
    id="vidinfra-player"
    src="https://player.vidinfra.com/7ff08669-8f0e-4e8c-9f30-425d96ab7c4d/default/aa2952e7-289d-4183-9601-9c3b567c0ead?autoplay=true&loop=true&muted=false&controls=true&preload=true&watermark=W3sidGV4dCI6Ik15VmlkZW9BcHAiLCJmb250IjoiQXJpYWwiLCJmb250U2l6ZSI6MjAsImZpbGxTdHlsZSI6InJnYmEoMjU1LDI1NSwyNTUsMC44KSIsInBhZGRpbmciOjgsIm9wYWNpdHkiOjAuOX0seyJ0ZXh0IjoiVXNlcjogMTgyNzQzOSIsImZvbnQiOiJSb2JvdG8iLCJmb250U2l6ZSI6MTgsImZpbGxTdHlsZSI6InJnYmEoMjU1LCAyNTUsIDI1NSwgMC42KSIsInN0cm9rZVN0eWxlIjoicmdiYSgwLCAwLCAwLCAwLjMpIiwicGFkZGluZyI6Niwib3BhY2l0eSI6MC44NSwibW92ZUludGVydmFsTXMiOjM1MDB9XQ=="
    loading="lazy"
    style="border: none; position: absolute; top: 0; height: 100%; width: 100%;"
    allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
    allowfullscreen="true">
  </iframe>
</div>

​
Minimal iframe template (ready to paste)

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe
    src="https://player.vidinfra.com/<librayID>/default/<videoID>?autoplay=true&loop=true&muted=false&controls=true&preload=true&watermark=<BASE64_ENCODED_CONFIG>"
    style="border: none; position: absolute; top: 0; height: 100%; width: 100%;"
    allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
    allowfullscreen>
  </iframe>
</div>

​
Dynamic user binding example

function buildWatermarkConfig(userId) {
  return [
    { text: "MyVideoApp", font: "Arial", fontSize: 20, fillStyle: "rgba(255,255,255,0.8)", padding: 8, opacity: 0.9 },
    { text: `User: ${userId}`, font: "Roboto", fontSize: 18, fillStyle: "rgba(255, 255, 255, 0.6)", strokeStyle: "rgba(0, 0, 0, 0.3)", padding: 6, opacity: 0.85, moveIntervalMs: 3500 },
  ];
}

function buildWatermarkedSrc(basePlayerUrl, userId) {
  const config = buildWatermarkConfig(userId);
  const watermark = encodeURIComponent(encodeWatermarkConfig(config));
  return `${basePlayerUrl}&watermark=${watermark}`;
}

// Usage:
// const src = buildWatermarkedSrc("https://player.vidinfra.com/<project>/<profile>/<video>?autoplay=true", currentUser.id);
// document.querySelector("#vidinfra-player").src = src;

​
Embed Vidinfra videos using iframe elements

  1. Copy the iframe snippet above into your page.
  2. Replace the src with your Vidinfra player URL and include watermark=<Base64> to apply your encoded config.
  3. Adjust container sizing (e.g., padding-bottom for aspect ratio) to fit your layout.
  4. Keep allowfullscreen enabled so viewers can expand the video.

​
Best practices

  • Use encodeURIComponent on the Base64 string when appending it to URLs.
  • Prefer semi-transparent fill plus a light stroke for readability on varied backgrounds.
  • Set moveIntervalMs between 2500–5000 for good movement without distraction.
  • Avoid PII: use a user ID or hashed email instead of raw email when possible.
  • Keep opacity >0.6 so the watermark stays visible on bright scenes.

​
Troubleshooting

  • Watermark not visible: increase opacity, add strokeStyle, or enlarge fontSize.
  • URL rejected or broken: ensure the watermark value is URL-encoded.
  • Movement too subtle: reduce moveIntervalMs or increase fontSize.
  • Layout issues: adjust the wrapper’s padding-bottom to match your aspect ratio (e.g., 56.25% for 16:9).

​
Quick verification checklist

  • The iframe loads and plays the video.
  • Watermark shows both brand and user text.
  • Watermark moves on an interval.
  • Fullscreen works and watermark remains visible.
Dynamic watermarking provides:
  • ✔ Stronger anti-piracy protection
  • ✔ User-specific traceability
  • ✔ Branding visibility
  • ✔ Hard-to-remove movement-based watermarking