Forum Discussion

BarbaraMinke's avatar
BarbaraMinke
Community Member
3 months ago
Solved

Non-Global Closed Captioning location

Is there a way to move the closed captioning between the top or bottom of the slide in a project? I have some slides that will require the captioning at the top to avoid covering information at the b...
  • SamHill's avatar
    3 months ago

    Unfortunately, the positioning properties that can be added to WebVTT files are not supported by Storyline. The only "non-global" solution would be to use JavaScript and CSS to change on a per slide basis, which would be a pita.

    You could have your captions default as bottom, but then define a style that override that and positions them at the top:

    body.captions-top .caption {
        bottom: auto !important;
        top: 0% !important;
    }

    You would need JavaScript to add the class ".captions-top" to the slide where you want the captions moved. You would then need to remove then need to remember to remove the class again after it has been added. You could do like this:

    Add this script to your MASTER SLIDE, and add the JavaScript to the timeline starts trigger. This ensures the class is removed every time the slide is navigated to (revert to default position).

    // Ensure STYLE is only added once
    if (!document.getElementById("captions-top")) {
      const style = document.createElement("style");
      style.id = "captions-top";
      style.innerHTML = `
          body.captions-top .caption {
              bottom: auto !important;
              top: 0% !important;
          }
      `;
      document.head.appendChild(style);
    }
    // This can run every time
    document.body.classList.remove("captions-top");

    Then, on the slide that you would like the captions to appear at the top. Add the following JS to timeline start trigger:

    document.body.classList.add("captions-top");