Browser-Based Captions Demo

Captions Match Every Viewer's Browser Language

The stock Vidyard player, plus a few lines of JavaScript that read the browser's preferred language and request the matching caption track — automatically.

Detecting language…

How to show a different language

Captions automatically follow the viewer's browser language. If no caption track matches, the player simply shows no captions. There are two ways to preview a specific language:

Quick preview (this demo): add ?lang= plus a language code to the URL and reload — e.g. ?lang=fr, ?lang=de, ?lang=it, ?lang=ja, ?lang=es, ?lang=en.
Real behavior: change your browser's preferred language (Chrome → Settings → Languages, move a language to the top) and reload. The player reads navigator.language, so it will pick that language on its own.

This demo video has captions for en, fr, de, it, ja, and es. The ?lang= override is only in this test page — the copyable snippet below relies purely on the browser language.

Embed snippet

<!-- Stock Vidyard embed script — in <head> (once per page) -->
<script type="text/javascript" async src="https://play.vidyard.com/embed/v4.js"></script>

<!-- Stock Vidyard player — unchanged -->
<img
  style="width: 100%; margin: auto; display: block;"
  class="vidyard-player-embed"
  src="https://play.vidyard.com/FgSaXqvGfncqdqDTXuS8qG.jpg"
  data-uuid="FgSaXqvGfncqdqDTXuS8qG"
  data-v="4"
  data-type="inline"
/>

<!-- Auto-caption: sets data-cc to the browser language (once per page). -->
<script>
(function () {
  if (window.__vidyardAutoCC) return;   // run once, even if included twice
  window.__vidyardAutoCC = true;
  var lang = (navigator.languages && navigator.languages[0]) || navigator.language || "";
  var cc = lang.split("-")[0];          // "fr-FR" -> "fr"
  if (!cc) return;
  document.querySelectorAll(".vidyard-player-embed").forEach(function (el) {
    el.setAttribute("data-cc", cc);
  });
})();
</script>