Skip to content

Commit

Permalink
docs(fallback): document fallback with example styles (#73)
Browse files Browse the repository at this point in the history
As discussed on #71, there's not much the component can do itself to provide a fallback, but it's very valuable to document how the fallback works for people less familiar with web components.

This adds a prominent example and educational info that will hopefully encourage people to provide a fallback for the numerous instances when it might be needed. It includes some [opinionated example styles](https://codepen.io/mrwweb/pen/qBKQOPW) which specifically call out using `aspect-ratio` to match the normal dimensions of a YouTube embed.

Adding this documentation feels like enough to satisfy #71 in my opinion, but I'd like to hear @simevidas weigh in on that too.

Additional minor change: remove whitespace at start of lines in playlist example that no other example code has.
  • Loading branch information
mrwweb authored Jan 4, 2023
1 parent e85e5b1 commit cdbd775
Showing 1 changed file with 53 additions and 4 deletions.
57 changes: 53 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,15 +55,64 @@ If you want the paste-and-go version, you can simply load it via CDN:
<lite-youtube videoid="guJLfqTFfIw"></lite-youtube>
```

## Basic Usage with Fallback Link

A fallback appears in any of the following circumstances:

1. Before the compontent is initialized
1. When JS is disabled (like `<noscript>`)
1. When JS fails or the lite-youtube script is not loaded/executed
1. When the browser doesn't support web components

```html
<lite-youtube videoid="guJLfqTFfIw">
<a class="lite-youtube-fallback" href="https://www.youtube.com/watch?v=guJLfqTFfIw">Watch on YouTube: "Sample output of devtools-to-video cli tool"</a>
</lite-youtube>
```

Example CSS:

```css
.lite-youtube-fallback {
aspect-ratio: 16 / 9; /* matches YouTube player */
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 1em;
padding: 1em;
background-color: #000;
color: #fff;
text-decoration: none;
}

/* right-facing triangle "Play" icon */
.lite-youtube-fallback::before {
display: block;
content: '';
border: solid transparent;
border-width: 2em 0 2em 3em;
border-left-color: red;
}

.lite-youtube-fallback:hover::before {
border-left-color: #fff;
}

.lite-youtube-fallback:focus {
outline: 2px solid red;
}
```

## Playlist Usage

Setting the YouTube playlistid allows the playlist interface to load on interaction. Note, this still requires a videoid for to load a placeholder thumbnail as YouTube does not return a thumbnail for playlists in the API.

```html
<lite-youtube
videoid="VLrYOji75Vc"
playlistid="PL-G5r6j4GptH5JTveoLTVqpp7w2oc27Q9"
></lite-youtube>
<lite-youtube
videoid="VLrYOji75Vc"
playlistid="PL-G5r6j4GptH5JTveoLTVqpp7w2oc27Q9"
></lite-youtube>
```

## Add Video Title
Expand Down

0 comments on commit cdbd775

Please sign in to comment.