# medium zoom
Image-Zoom – Bild muss Klasse zoom haben. Dies wird mit markdown-it-decorate erreicht:
<!-- { .zoom } -->
https://vuepress.github.io/en/plugins/medium-zoom/ (opens new window)
# containers
# warning
Info
here be dragons
Bitte aufpassen!
here be dragons
::: warning
*here be dragons*
:::
::: warning <i class="mdi mdi-alert"></i> Bitte aufpassen!
*here be dragons*
:::
2
3
4
5
6
7
# tip
Hinweis
here be dragons
beachte
here be dragons
::: tip
here be dragons
:::
::: tip beachte
here be dragons
:::
2
3
4
5
6
7
# danger
Achtung
here be dragons
ufpasse bitte!
here be dragons
::: danger
here be dragons
:::
::: danger ufpasse bitte!
here be dragons
:::
2
3
4
5
6
7
# details
Spoiler
here be dragons
Lösung
here be dragons
::: details
here be dragons
:::
::: details Lösung
here be dragons
:::
2
3
4
5
6
7
https://vuepress.github.io/en/plugins/container/#installation (opens new window)
# Link-Checker
npm run check-md
ist in ./build.sh integriert
https://github.com/ulivz/vuepress-plugin-check-md (opens new window)
# Sitemap
wird bei build ausgeführt. angucken (opens new window)
https://github.com/ekoeryanto/vuepress-plugin-sitemap (opens new window)
# vue-plyr
Aufpassen beim Einrücken von componenten-Inhalt! Vuepress convertiert das in Markdown, also pre-Block. Deshalb wrapper-Div oder kein Einrücken
# Video
<div>
<vue-plyr>
<video
crossorigin
playsinline
poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4"
>
<source
size="576"
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4"
type="video/mp4"
>
<source
size="720"
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4"
type="video/mp4"
>
<source
size="1080"
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4"
type="video/mp4"
>
<track
default
kind="captions"
label="English"
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
srclang="en"
>
<track
kind="captions"
label="Français"
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"
srclang="fr"
>
<a
download=""
href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4"
>
Download
</a>
</video>
</vue-plyr>
</div>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
# Audio Player
<vue-plyr>
<audio crossorigin playsinline>
<source
src="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3"
type="audio/mp3"
>
<source
src="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg"
type="audio/ogg"
>
</audio>
</vue-plyr>
2
3
4
5
6
7
8
9
10
11
12
# YouTube
<vue-plyr>
<div class="plyr__video-embed">
<iframe
allow="autoplay"
allowfullscreen
allowtransparency
src="https://www.youtube.com/embed/bTqVqk7FSmY?iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1"
/>
</div>
</vue-plyr>
2
3
4
5
6
7
8
9
10
# Vimeo
<vue-plyr>
<div class="plyr__video-embed">
<iframe
allow="autoplay"
allowfullscreen
allowtransparency
src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
/>
</div>
</vue-plyr>
2
3
4
5
6
7
8
9
10
# YouTube (Not Progressive Enhancement)
<vue-plyr>
<div
data-plyr-embed-id="bTqVqk7FSmY"
data-plyr-provider="youtube"
/>
</vue-plyr>
2
3
4
5
6
# Vimeo (Not Progressive Enhancement)
<vue-plyr>
<div
data-plyr-embed-id="76979871"
data-plyr-provider="vimeo"
/>
</vue-plyr>
2
3
4
5
6