a11y-media-player: YouTube

a11y-media-player works with You Tube videos. Here’s how:

<data-custom-element="a11y-media-player" 
    media-title="Example Video" 
    accent-color="red"
    linkable 
    crossorigin="anonymous">
    <iframe src="https://www.youtube.com/embed/BKorP55Aqvg" 
        width="560" 
        height="315" 
        allowfullscreen="allowfullscreen">
    </iframe>
</div>

<data-custom-element="a11y-media-player" 
    media-title="Example YouTube (Captions VTT Uploaded to Sites)" 
    accent-color="pink" 
    dark 
    linkable crossorigin="anonymous">
    <iframe src="https://www.youtube.com/embed/NP0mQeLWCCo" 
        width="560" 
        height="315" 
        allowfullscreen>
    </iframe>
    <video>
        <track src="//sites.psu.edu/webcomponents/files/2020/07/bueller.vtt" 
            label="English" 
            kind="subtitles" 
            srclang="en" 
            default/>
    </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.