flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/dogumentation. Simple, minimalistic documentation template using astro
flo-bit.dev/dogumentation/
1.4 kB
64 lines
1---
2import "lite-youtube-embed/src/lite-yt-embed.css";
3import urlMatcher from "./matcher";
4
5export interface Props extends astroHTML.JSX.HTMLAttributes {
6 id: string;
7 poster?: string;
8 posterQuality?: "max" | "high" | "default" | "low";
9 params?: string;
10 playlabel?: string;
11}
12
13const {
14 id,
15 poster,
16 posterQuality = "default",
17 title,
18 ...attrs
19} = Astro.props as Props;
20
21const idRegExp = /^[A-Za-z0-9-_]+$/;
22
23function extractID(idOrUrl: string) {
24 if (idRegExp.test(idOrUrl)) return idOrUrl;
25 return urlMatcher(idOrUrl);
26}
27
28const videoid = extractID(id);
29const posterFile =
30 {
31 max: "maxresdefault",
32 high: "sddefault",
33 default: "hqdefault",
34 low: "default",
35 }[posterQuality] || "hqdefault";
36const posterURL =
37 poster || `https://i.ytimg.com/vi/${videoid}/${posterFile}.jpg`;
38const href = `https://youtube.com/watch?v=${videoid}`;
39---
40
41<lite-youtube
42 {videoid}
43 {title}
44 data-title={title}
45 {...attrs}
46 style={`background-image: url('${posterURL}');`}
47>
48 <a {href} class="lty-playbtn">
49 <span class="lyt-visually-hidden">{attrs.playlabel}</span>
50 </a>
51</lite-youtube>
52
53<script src="lite-youtube-embed"></script>
54
55<style is:global>
56 lite-youtube > iframe {
57 all: unset !important;
58 width: 100% !important;
59 height: 100% !important;
60 position: absolute !important;
61 inset: 0 !important;
62 border: 0 !important;
63 }
64</style>