wires/hypnagaga_old
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update video docs

Browse source
This commit is contained in:
madrilene 2025-03-13 16:30:01 +01:00
parent f1f180a453
commit 2165d24099
2 changed files with 46 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
src/docs/video.md Normal file
View file

@ -0,0 +1,46 @@
---
title: Video
---
### YouTube
`<custom-youtube>` is a wrapper around [Lite YouTube Embed](https://github.com/paulirish/lite-youtube-embed), optimizing video playback for performance.
`@slug` video ID
`@start` (optional) start time in seconds
`@label` Used for accessibility and the `<custom-youtube-link>` fallback
`@poster` (optional) custom poster image URL (with https://v1.opengraph.11ty.dev/)
`@posterSize` (optional, default: 'auto') size passed in to custom poster
`@jsapi` (optional, default: 'undefined') Enables [JavaScript API support](https://github.com/paulirish/lite-youtube-embed?tab=readme-ov-file#access-the-youtube-iframe-player-api).
```
<custom-youtube
@slug="Ah6je_bBSH8"
@label="Alberto Ballesteros - Artista Sin Obra">
</custom-youtube>
```
<div><custom-youtube @slug="Ah6je_bBSH8" @label="Alberto Ballesteros - Artista Sin Obra"> </custom-youtube></div>
### PeerTube
`<custom-peertube>` is a wrapper around [PeerTube](https://joinpeertube.org/)’s embed system.
`@instance` PeerTube domain hosting the video
`@embed-slug` – The unique ID used in the embed URL.
`@start` (optional) start time
`@slug` unique video identifier for direct links in the `<custom-peertube-link>` fallback
`@label` Used for accessibility and the `<custom-peertube-link>` fallback.
```
<custom-peertube
@instance="fair.tube"
@slug="8opkviMc2iDUYMwJzG1FQ4"
@embed-slug="3bd0b70e-7890-4216-a123-2052363645ff"
@label='Back at the Herperduin 💦 - 28/09/2024'>
</custom-peertube>
```
<div>
<custom-peertube @instance="fair.tube" @slug="8opkviMc2iDUYMwJzG1FQ4" @embed-slug="3bd0b70e-7890-4216-a123-2052363645ff" @label='Back at the Herperduin 💦 - 28/09/2024'></custom-peertube>
</div>

13
src/docs/youtube.md
View file

@ -1,13 +0,0 @@
---
title: Youtube
---
The `@slug` attribute is used to pass the video ID to the `<lite-youtube>` element.
`@label` ist used for the nested `<custom-youtube-link>` which adds a link to watch on YouTube. This also serves as a fallback in case JS is deactivated.
Uses the [Lite YouTube Embed repository](https://github.com/paulirish/lite-youtube-embed).
```
<custom-youtube @slug="Ah6je_bBSH8" @label="Alberto Ballesteros - Artista Sin Obra"> </custom-youtube>
```
<div><custom-youtube @slug="Ah6je_bBSH8" @label="Alberto Ballesteros - Artista Sin Obra"> </custom-youtube></div>