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

Trouvé sur

Merci

Video youtube 

{{< youtube M15OGFIsDXU >}}