Search code examples
javascriptreactjsinteractivewebvtt

How to hide Timestamps from interactive transcript

I'm making an interactive ebooks for personal use based on the site example below: https://umd-mith.github.io/webvtt-player

The site uses a VTT file and an audio file.

I'd like to hide the time stamps which the JavaScript code needs however for read ability purposes I’d like to hide the timestamps.

Any Help is appreciated and I'm assuming this is simple and I'm just overlooking the obvious.

I still want the rest of the transcript to show and be interactive but hide the timestamps completely on the left (hidden so the rest of the javascript still syncs to audio).

I haven't done much coding in a while and when I save a copy of the HTML and use examples found at the site below it will either hide the entire transcript or do nothing.

JavaScript hide/show element

Solution

  • You can just add the following CSS:

    .webvtt-player .time {
    display: none;
}
.webvtt-player .text {
    margin: 0;
}