Bump @justinribeiro/lite-youtube from 0.9.0 to 0.9.1 in /build/javascript (#273)
* Commit updated Javascript packages * Bump preact from 10.5.4 to 10.5.5 in /build/javascript (#265) * Trying a new github workflow to install javascript packages * Bump tailwindcss from 1.9.2 to 1.9.4 in /build/javascript (#266) Bumps [tailwindcss](https://github.com/tailwindlabs/tailwindcss) from 1.9.2 to 1.9.4. - [Release notes](https://github.com/tailwindlabs/tailwindcss/releases) - [Changelog](https://github.com/tailwindlabs/tailwindcss/blob/master/CHANGELOG.md) - [Commits](https://github.com/tailwindlabs/tailwindcss/compare/v1.9.2...v1.9.4) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Commit updated Javascript packages * Bump preact from 10.5.4 to 10.5.5 in /build/javascript Bumps [preact](https://github.com/preactjs/preact) from 10.5.4 to 10.5.5. - [Release notes](https://github.com/preactjs/preact/releases) - [Commits](https://github.com/preactjs/preact/compare/10.5.4...10.5.5) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Gabe Kangas <gabek@real-ity.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Owncast <owncast@owncast.online> * Bump @justinribeiro/lite-youtube in /build/javascript Bumps [@justinribeiro/lite-youtube](https://github.com/justinribeiro/lite-youtube) from 0.9.0 to 0.9.1. - [Release notes](https://github.com/justinribeiro/lite-youtube/releases) - [Commits](https://github.com/justinribeiro/lite-youtube/commits) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Owncast <owncast@owncast.online> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Gabe Kangas <gabek@real-ity.com>
This commit is contained in:
dependabot[bot]
124
build/javascript/node_modules/@justinribeiro/lite-youtube/README.md
generated
vendored
Normal file
124
build/javascript/node_modules/@justinribeiro/lite-youtube/README.md
generated
vendored
Normal file
@@ -0,0 +1,124 @@
|
||||
[](https://badge.fury.io/js/%40justinribeiro%2Flite-youtube)
|
||||
|
||||
# \<lite-youtube\>
|
||||
|
||||
> A web component that displays render YouTube embeds faster. The shadowDom web component version of Paul's [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed).
|
||||
|
||||
## Features
|
||||
|
||||
- No dependencies; it's just a vanilla web component.
|
||||
- It's fast yo.
|
||||
- It's Shadow Dom encapsulated!
|
||||
- It's responsive 16:9
|
||||
- It's accessible via keyboard and will set ARIA via the `videotitle` attribute
|
||||
- It's locale ready; you can set the `videoplay` to have a properly locale based label
|
||||
- Set the `start` attribute to start at a particular place in a video
|
||||
- You can set `autoload` to use Intersection Observer to load the iframe when scrolled into view.
|
||||
- Loads placeholder image as WebP with a Jpeg fallback
|
||||
|
||||
## Install
|
||||
|
||||
This web component is built with ES modules in mind and is
|
||||
available on NPM:
|
||||
|
||||
Install code-block:
|
||||
|
||||
```sh
|
||||
npm i @justinribeiro/lite-youtube
|
||||
# or
|
||||
yarn add @justinribeiro/lite-youtube
|
||||
```
|
||||
|
||||
After install, import into your project:
|
||||
|
||||
```js
|
||||
import '@justinribeiro/lite-youtube';
|
||||
```
|
||||
|
||||
## Install with CDN
|
||||
|
||||
If you want the paste-and-go version, you can simply load it via CDN:
|
||||
|
||||
```html
|
||||
<script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@0.6.2/lite-youtube.js">
|
||||
```
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<lite-youtube videoid="guJLfqTFfIw"></lite-youtube>
|
||||
```
|
||||
|
||||
## Add Video Title
|
||||
|
||||
```html
|
||||
<lite-youtube
|
||||
videoid="guJLfqTFfIw"
|
||||
videotitle="This is a video title"
|
||||
></lite-youtube>
|
||||
```
|
||||
|
||||
## Change "Play" for Locale</h3>
|
||||
|
||||
```html
|
||||
<lite-youtube
|
||||
videoid="guJLfqTFfIw"
|
||||
videoplay="Mirar"
|
||||
videotitle="Mis hijos se burlan de mi español"
|
||||
>
|
||||
</lite-youtube>
|
||||
```
|
||||
|
||||
## Style It
|
||||
|
||||
Height and Width are responsive in the component.
|
||||
|
||||
```html
|
||||
<style>
|
||||
.styleIt {
|
||||
width: 400px;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
<div class="styleIt">
|
||||
<lite-youtube videoid="guJLfqTFfIw"></lite-youtube>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Set a video start time
|
||||
|
||||
```html
|
||||
<!-- Start at 5 seconds -->
|
||||
<lite-youtube videoid="guJLfqTFfIw" videoStartAt="5"></lite-youtube>
|
||||
```
|
||||
|
||||
## AutoLoad with IntersectionObserver
|
||||
|
||||
Uses Intersection Observer if available to automatically load the YouTube iframe when scrolled into view.
|
||||
|
||||
```html
|
||||
<lite-youtube videoid="guJLfqTFfIw" autoload> </lite-youtube>
|
||||
```
|
||||
|
||||
## YouTube QueryParams
|
||||
|
||||
Use any [YouTube Embedded Players and Player Parameters](https://developers.google.com/youtube/player_parameters) you like
|
||||
|
||||
```html
|
||||
<lite-youtube videoid="guJLfqTFfIw" params="controls=0&enablejsapi=1">
|
||||
</lite-youtube>
|
||||
```
|
||||
|
||||
## Attributes
|
||||
|
||||
The web component allows certain attributes to be give a little additional
|
||||
flexibility.
|
||||
|
||||
| Name | Description | Default |
|
||||
| -------------- | ---------------------------------------------------------------- | ------- |
|
||||
| `videoid` | The YouTube videoid | `` |
|
||||
| `videotitle` | The title of the video | `Video` |
|
||||
| `videoplay` | The title of the play button (for translation) | `Play` |
|
||||
| `videoStartAt` | Set the point at which the video should start, in seconds | `0` |
|
||||
| `autoload` | Use Intersection Observer to load iframe when scrolled into view | `false` |
|
||||
| `params` | Set YouTube query parameters | `` |
|
||||
Reference in New Issue
Block a user