Alan's YouTube Player Web Component

Introduction

This is the web component I'm building to embed videos on my sites. The first version is coming along nicely:

Videos are embedded using a custom yt-player element. It has one required video attribute which is the YouTube ID of the video to play. For example:
```
<yt-player video="REPPgPcw4hk">
  <noscript>
    JavaScript is not available to load the video player
  </noscript>
</yt-player>
          
```
An optional start attribute can be used to set start the video some number of seconds in. (It has to be full seconds, and may not be exactly what's used because of the way some video encoding works)
Provide a Play/Pause button
Provide a Stop button
Allow multiple videos on a single page
Provide speed adjustment buttons
Allow styling from via parent page's CSS
Provide structure for responsive design
Provide a mute/unmute button
Provide a data-state value for styling depending on the state of the player (e.g. playing, paused, stopped)
Show an image instead of the video to start with
Provide a data-yt-state attribute to body element that can be used to adjust styling when videos are playing (e.g. dim the rest of the content). (Note: I'm punting on issues that will arise if there are multiple players on the page that you try to play at the same time)
TODO: Save playhead location when stopping the player or reloading the page.
TODO: Set up the speed buttons so they start playing at the specific speed if the video isn't already going
TODO: Provide skip forward and backwards buttons
TODO: Fallback to lower res images if the best quality one fails (see note in reference from Paul Irish)

PROBABLY: Send focus to video player so keyboard commands work
PROBABLY: If there are multiple videos on the page only one plays at a time (i.e. if one is playing and another one gets started it stops the first one).
MAYBE: Support a fade-in/fade-out feature. Probably configurable.
MAYBE: Add volume slider
MAYBE: Set up coordination to allow multiple videos to play at the same time without clobbering each other when updated the body level `data-yt-player-state` attribute
MAYBE: Allow other scripts on the page to control the player (this might already work, needs testing)
MAYBE: Provide an autoplay attribute that attempts to auto play the video

The playback rates available for each video are determined on the YouTube side. They are filtered down to include: 0.5x, 1x, 1.5x, 2x, and 3x. This ignores 0.25x, 0.75x, 1.25x, and 1.75x. I'm making that trade off to reduce the number of items in the UI. I'm not sure if 3x rates exist. The numbers in the docs are generic and the test videos I've used don't have the rate. TBD on that.
I'd like to be able to add a closed caption button but I'm not sure how to do that yet or if it's even possible through the api. TBD on that
I'm not trying to optimize loading. The base functionality is provided directly by the YouTube API and default iFrame