a11y-media-player: Video

You can use the a11y-media-player web component for videos. Here’s how:

<div data-custom-element="a11y-media-player" 
    media-title="Example Video" 
    accent-color="light-blue" 
    crossorigin="anonymous" 
    linkable>
    <video poster="//www.personal.psu.edu/lnm105/stclair.jpg">
        <source src="//www.personal.psu.edu/lnm105/stclair.mp4" type="video/mp4" />
        <track src="https://sites.psu.edu/webcomponents/files/2020/07/stclair.vtt" 
            default 
            label="English" 
            kind="subtitles" 
            srclang="en" />
    </video>
</div>

Player requires a local copy of captions for the caption/transcript features. If you have a captions VTT file, upload it to your Sites media to avoid issues with CORS (cross-site restrictions).

Learn more about how to customize it at https://webcomponents.psu.edu.