Afficher une video
Afficher la vidéo dans un article, réduire sa taille au maximum.
Intégrer une vidéo interne, Peertube, (et aussi youtube)
Et choisir les bonnes options, comme la lecture automatique, en continu, …
Afficher-une-video-dans-un-billet/
|-- _index.md
|-- my-video.jpg
|-- my-video.mp4
|-- my-video.webm
{{< video src="my-video" autoplay="true" controls="false" loop="true" >}}
Vidéo interne
Avec un dossier comme
Afficher-une-video-dans-un-billet/
|-- _index.md
|-- my-video.jpg
|-- my-video.mp4
|-- my-video.webm
on peut embarquer my-video comme il suit:
{{< video src="my-video" autoplay="true" controls="false" loop="true" >}}
Le shortcode utilisera l’image pour créer le poster. Cela rendra comme ceci dans le code html généré:
<video
autoplay
loop
poster="/blog/dev/Afficher-une-video-dans-un-billet/my-video.jpg"
width="100%"
playsinline
>
<source src="/blog/dev/Afficher-une-video-dans-un-billet/my-video.mp4" type="video/mp4" />
<source src="/blog/dev/Afficher-une-video-dans-un-billet/my-video.webm" type="video/webm" />
</video>
Autres attributs possible
| Attribute | Default |
|---|---|
| autoplay | false |
| controls | true |
| height | |
| loop | false |
| muted | true |
| preload | |
| width | 100% |
| playsinline | true |
Video Peertube
/!\ L’intégration ne fonctionne pas avec deux vidéos avec la même id.
Fichier à ajouter dans ./layouts/shortcodes/peertube.html.
{{< peertube framatube.org 4SAGhoD1kPpuAqVc4bWNFB >}}
Après avoir cliqué, la vidéo est chargée depuis le site framatube.org.
Fondation Blender - Big Buck Bunny
Regarder cette vidéo en ligne peut révéler votre adresse IP à d’autres personnes.
Ou avec des paramètres supplémentaires.
{{< peertube host=framatube.org id=9c9de5e8-0a1e-484a-b099-e80766180a6d start=30 >}}
Après avoir cliqué, la vidéo est chargée depuis le site framatube.org.
What is PeerTube?
Regarder cette vidéo en ligne peut révéler votre adresse IP à d’autres personnes.
| Name | Type | Default | Description |
|---|---|---|---|
host | string | Required | PeerTube server host. Optional if provided as the first positional argument. |
id | string | Required | Video UUID or short UUID. Optional if provided as the second positional argument. |
allowFullScreen | bool | true | Allow fullscreen mode. |
autoplay | bool | false | Auto-plays the video. Forces muted=true. |
class | string | — | CSS class for the wrapper div. Removes inline styles when set. |
controls | bool | true | Show video controls. |
controlBar | bool | true | Show control bar during playback. |
title | bool | true | Show the embedded title. |
warningTitle | bool | true | Show the P2P warning title. |
p2p | bool | true | Enable/disable peer-to-peer streaming. |
mode | string | p2p-media-loader | Player engine. Accepts web-video or p2p-media-loader. |
loop | bool | false | Repeat the video indefinitely (overrides start/end after first loop). |
muted | bool | false | Mute video by default. Always true if autoplay is enabled. |
start | int | — | Start time in seconds. |
api | bool | true | Enable/disable the embed JavaScript API. |
waitPasswordFromEmbedAPI | bool | true | Wait for password from API before loading video, if password-protected. |
playlistPosition | int | — | Position of video within a playlist, if embedding a playlist. |
📘 Reference: PeerTube Embed Player API
Video youtube
{{< youtube M15OGFIsDXU >}}